components/Toast.tsx

import React, { useEffect } from 'react';
import { CheckCircle, AlertCircle, X } from 'lucide-react';

export interface ToastState {
  show: boolean;
  message: string;
  type: 'success' | 'error';
}

interface ToastProps {
  message: string;
  type?: 'success' | 'error';
  onClose: () => void;
}

export const Toast: React.FC<ToastProps> = ({ message, type = 'success', onClose }) => {
  useEffect(() => {
    const timer = setTimeout(onClose, 3000);
    return () => clearTimeout(timer);
  }, [onClose]);

  return (
    <div className="fixed top-20 left-1/2 -translate-x-1/2 z-[99999] animate-in slide-in-from-top-5 fade-in duration-300 w-max max-w-[90vw]">
      <div className={`flex items-center gap-3 px-6 py-3 rounded-xl shadow-2xl border backdrop-blur-md ${type === 'success' ? 'bg-white/95 border-green-200 text-green-800' : 'bg-white/95 border-red-200 text-red-800'}`}>
        {type === 'success' ? <CheckCircle size={20} className="text-green-500 shrink-0" /> : <AlertCircle size={20} className="text-red-500 shrink-0" />}
        <span className="font-bold text-sm">{message}</span>
        <button onClick={onClose} className="ml-2 opacity-50 hover:opacity-100 p-1"><X size={16}/></button>
      </div>
    </div>
  );
};