import { useState, useEffect, useCallback } from 'react';
import { CheckCircle, XCircle, X } from 'lucide-react';

export interface Toast {
  message: string;
  type: 'success' | 'error';
}

export function useToast() {
  const [toast, setToast] = useState<Toast | null>(null);

  useEffect(() => {
    if (!toast) return;
    const t = setTimeout(() => setToast(null), 3000);
    return () => clearTimeout(t);
  }, [toast]);

  const showToast = useCallback((message: string, type: 'success' | 'error' = 'success') => {
    setToast({ message, type });
  }, []);

  const ToastComponent = () => {
    if (!toast) return null;
    const isSuccess = toast.type === 'success';
    return (
      <div
        className={`fixed bottom-6 right-6 z-[100] flex items-center gap-2 rounded-lg px-4 py-3 text-sm shadow-lg
          animate-[fadeInUp_0.25s_ease-out] ${isSuccess ? 'bg-green-500/15 text-green-400' : 'bg-red-500/15 text-red-400'}`}
      >
        {isSuccess ? <CheckCircle className="h-4 w-4 shrink-0" /> : <XCircle className="h-4 w-4 shrink-0" />}
        <span>{toast.message}</span>
        <button onClick={() => setToast(null)} className="ml-1 hover:opacity-70">
          <X className="h-3 w-3" />
        </button>
      </div>
    );
  };

  return { toast, showToast, ToastComponent };
}