myeasycms-v2/apps/web/app/[locale]/home/[account]/events/[eventId]/delete-event-button.tsx

'use client';

import { useRouter } from 'next/navigation';

import { Trash2 } from 'lucide-react';

import { deleteEvent } from '@kit/event-management/actions/event-actions';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@kit/ui/alert-dialog';
import { Button } from '@kit/ui/button';
import { useActionWithToast } from '@kit/ui/use-action-with-toast';

interface Props {
  eventId: string;
  accountSlug: string;
}

export function DeleteEventButton({ eventId, accountSlug }: Props) {
  const router = useRouter();

  const { execute, isPending } = useActionWithToast(deleteEvent, {
    successMessage: 'Veranstaltung wurde abgesagt',
    errorMessage: 'Fehler beim Absagen',
    onSuccess: () => router.push(`/home/${accountSlug}/events`),
  });

  return (
    <AlertDialog>
      <AlertDialogTrigger
        render={
          <Button variant="destructive" size="sm" disabled={isPending}>
            <Trash2 className="mr-2 h-4 w-4" aria-hidden="true" />
            Absagen
          </Button>
        }
      />
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Veranstaltung absagen?</AlertDialogTitle>
          <AlertDialogDescription>
            Die Veranstaltung wird auf den Status &quot;Abgesagt&quot; gesetzt.
            Diese Aktion kann rückgängig gemacht werden.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Abbrechen</AlertDialogCancel>
          <AlertDialogAction onClick={() => execute({ eventId })}>
            Absagen
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}