"use client";

import { useTransition } from "react";
import { Trash2 } from "lucide-react";

export function DeleteButton({
  action,
  confirmMessage = "Yakin ingin menghapus data ini?",
}: {
  action: () => Promise<void>;
  confirmMessage?: string;
}) {
  const [isPending, startTransition] = useTransition();

  return (
    <button
      type="button"
      disabled={isPending}
      onClick={() => {
        if (confirm(confirmMessage)) {
          startTransition(async () => {
            try {
              await action();
            } catch (error) {
              alert(error instanceof Error ? error.message : "Gagal menghapus data.");
            }
          });
        }
      }}
      className="rounded-lg p-2 text-gray-500 transition hover:bg-red-50 hover:text-red-600 disabled:opacity-50"
      aria-label="Hapus"
    >
      <Trash2 className="h-4 w-4" />
    </button>
  );
}