myeasycms-v2/apps/web/app/[locale]/home/[account]/courses/[courseId]/delete-course-button.tsx

'use client';

import { useRouter } from 'next/navigation';

import { Trash2 } from 'lucide-react';

import { deleteCourse } from '@kit/course-management/actions/course-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 {
  courseId: string;
  accountSlug: string;
}

export function DeleteCourseButton({ courseId, accountSlug }: Props) {
  const router = useRouter();

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

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