"use client";

import { useFormStatus } from "react-dom";

function SubmitButton({ children }: { children?: React.ReactNode }) {
  const { pending } = useFormStatus();
  return (
    <button
      type="submit"
      disabled={pending}
      className="rounded-full px-3.5 py-1.5 text-xs font-semibold text-coral-dark transition-colors hover:bg-coral-soft disabled:opacity-60"
    >
      {pending ? "Deleting…" : (children ?? "Delete")}
    </button>
  );
}

/**
 * Generic confirm-then-delete button. The server action must read
 * a hidden "id" field from the form data.
 */
export function DeleteButton({
  action,
  id,
  label,
  confirm,
}: {
  action: (formData: FormData) => void | Promise<void>;
  id: string;
  label: string;
  confirm: string;
}) {
  return (
    <form
      action={action}
      onSubmit={(e) => {
        if (!window.confirm(confirm)) e.preventDefault();
      }}
    >
      <input type="hidden" name="id" value={id} />
      <SubmitButton>{label}</SubmitButton>
    </form>
  );
}