"use client";

import { useTransition } from 'react';
import { toggleVerification } from '@/app/actions/business';
import { CheckCircle, XCircle, Loader2 } from 'lucide-react';
import { toast } from 'react-hot-toast';

interface Props {
  id: string;
  verified: boolean;
}

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

  const handleToggle = () => {
    startTransition(async () => {
      const result = await toggleVerification(id, verified);
      if (result.success) {
        toast.success(verified ? "Vérification révoquée" : "Entreprise validée");
      } else {
        toast.error(result.error || "Une erreur est survenue");
      }
    });
  };

  return (
    <button 
      onClick={handleToggle}
      disabled={isPending}
      className={verified ? "btn-unverify" : "btn-verify"}
    >
      <div className="flex items-center gap-2">
        {isPending ? (
          <Loader2 className="w-4 h-4 animate-spin" />
        ) : verified ? (
          <XCircle className="w-4 h-4" />
        ) : (
          <CheckCircle className="w-4 h-4" />
        )}
        {verified ? "Révoquer" : "Valider"}
      </div>
    </button>
  );
}
