"use client";

import { useTransition } from 'react';
import { deleteComment } from '@/app/actions/comment';
import { Trash2, Loader2 } from 'lucide-react';
import { toast } from 'react-hot-toast';

interface Props {
  id: string;
}

export default function DeleteCommentButton({ id }: Props) {
  const [isPending, startTransition] = useTransition();

  const handleDelete = () => {
    if (confirm("Êtes-vous sûr de vouloir supprimer ce commentaire ?")) {
      startTransition(async () => {
        const result = await deleteComment(id);
        if (result.success) {
          toast.success("Commentaire supprimé");
        } else {
          toast.error(result.error || "Erreur lors de la suppression");
        }
      });
    }
  };

  return (
    <button 
      onClick={handleDelete}
      disabled={isPending}
      className="p-2 text-slate-500 hover:text-red-400 hover:bg-red-400/10 rounded-lg transition-colors"
      title="Supprimer"
    >
      {isPending ? (
        <Loader2 className="w-5 h-5 animate-spin" />
      ) : (
        <Trash2 className="w-5 h-5" />
      )}
    </button>
  );
}
