"use client";

import { useTransition } from "react";
import { Loader2 } from "lucide-react";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";
import { confirmAlertAction } from "./actions";

export function AlertConfirmForm({ token }: { token: string }) {
  const [isPending, startTransition] = useTransition();

  const handleConfirm = () => {
    startTransition(async () => {
      const result = await confirmAlertAction(token);
      if ("error" in result && result.error) {
        toast.error(result.error as string);
      } else {
        toast.success("Erfolgreich bestätigt!");
      }
    });
  };

  return (
    <Button
      size="lg"
      className="w-full sm:w-auto font-semibold text-lg"
      onClick={handleConfirm}
      disabled={isPending}
    >
      {isPending ? (
        <Loader2 className="mr-2 h-5 w-5 animate-spin" />
      ) : null}
      Ich bestätige! (Bin auf dem Weg)
    </Button>
  );
}
