"use client";
import * as React from "react";
import { useRouter } from "next/navigation";
import { Ban } from "lucide-react";
import { cancelCrawl } from "@/actions/crawls";
import { Button } from "@/components/ui/button";

export function CancelCrawlButton({ id, size = "sm" }: { id: string; size?: "xs" | "sm" }) {
  const router = useRouter();
  const [pending, startTransition] = React.useTransition();
  const [error, setError] = React.useState<string | null>(null);
  return (
    <span className="inline-flex items-center gap-2">
      {error ? <span className="text-[11.5px] text-danger">{error}</span> : null}
      <Button
        variant="outline"
        size={size}
        loading={pending}
        onClick={() =>
          startTransition(async () => {
            setError(null);
            const res = await cancelCrawl(id);
            if (!res.ok) setError(res.error.message);
            else router.refresh();
          })
        }
        aria-label={`Cancel crawl ${id}`}
      >
        {!pending ? <Ban className="size-3.5" /> : null} Cancel
      </Button>
    </span>
  );
}