"use client";

import { useState } from "react";
import { deleteProjectAction } from "./actions";
import { Trash2, Loader2 } from "lucide-react";

export function DeleteProjectButton({ id }: { id: string }) {
  const [loading, setLoading] = useState(false);

  async function handleDelete() {
    if (confirm("Are you sure you want to delete this project? This cannot be undone.")) {
      setLoading(true);
      await deleteProjectAction(id);
      setLoading(false);
    }
  }

  return (
    <button
      onClick={handleDelete}
      disabled={loading}
      className="p-2 text-muted-foreground hover:text-error hover:bg-error/10 rounded-lg transition-colors disabled:opacity-50"
      title="Delete Project"
    >
      {loading ? <Loader2 size={18} className="animate-spin" /> : <Trash2 size={18} />}
    </button>
  );
}
