"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { cancelJobAction } from "../actions";

type Props = {
  jobId: string;
};

export function CancelJobButton({ jobId }: Props) {
  const [busy, setBusy] = useState(false);
  const router = useRouter();
  return (
    <button
      type="button"
      onClick={async () => {
        setBusy(true);
        try {
          await cancelJobAction(jobId);
          router.refresh();
        } finally {
          setBusy(false);
        }
      }}
      disabled={busy}
      className="px-2 py-1 rounded border border-destructive/30 text-xs font-medium text-destructive hover:bg-destructive-soft disabled:opacity-50"
    >
      {busy ? "Cancelling…" : "Cancel"}
    </button>
  );
}