"use client";

import { useFormStatus } from "react-dom";
import { deleteTestimonialAction } from "@/app/admin/actions";

function SubmitButton() {
  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…" : "Delete"}
    </button>
  );
}

export function DeleteTestimonialButton({ id, author }: { id: string; author: string }) {
  return (
    <form
      action={deleteTestimonialAction}
      onSubmit={(e) => {
        if (!window.confirm(`Delete the testimonial from “${author}”? This cannot be undone.`)) {
          e.preventDefault();
        }
      }}
    >
      <input type="hidden" name="id" value={id} />
      <SubmitButton />
    </form>
  );
}