import React from 'react';
import { CheckCircle2, AlertCircle, Info, X } from 'lucide-react';

export interface ToastMessage {
  id: string;
  type: 'success' | 'error' | 'info';
  title: string;
  message?: string;
}

interface ToastProps {
  toasts: ToastMessage[];
  onClose: (id: string) => void;
}

export function ToastContainer({ toasts, onClose }: ToastProps) {
  if (toasts.length === 0) return null;

  return (
    <div className="fixed bottom-6 right-6 z-[200] space-y-3 max-w-sm w-full">
      {toasts.map((toast) => {
        const isSuccess = toast.type === 'success';
        const isError = toast.type === 'error';
        const Icon = isSuccess ? CheckCircle2 : isError ? AlertCircle : Info;

        return (
          <div
            key={toast.id}
            className={`
              p-4 rounded-2xl border shadow-xl flex items-start gap-3 transition-all duration-200 animate-in slide-in-from-bottom-5
              ${isSuccess ? 'bg-emerald-950/90 border-emerald-500/30 text-emerald-100' : ''}
              ${isError ? 'bg-rose-950/90 border-rose-500/30 text-rose-100' : ''}
              ${toast.type === 'info' ? 'bg-card border-border text-foreground' : ''}
            `}
          >
            <Icon className={`w-5 h-5 flex-shrink-0 mt-0.5 ${isSuccess ? 'text-emerald-400' : isError ? 'text-rose-400' : 'text-primary'}`} />
            <div className="flex-1 min-w-0">
              <h4 className="text-xs font-bold font-heading">{toast.title}</h4>
              {toast.message && <p className="text-[0.7rem] opacity-80 mt-0.5 leading-relaxed">{toast.message}</p>}
            </div>
            <button
              onClick={() => onClose(toast.id)}
              className="opacity-60 hover:opacity-100 p-1 transition-opacity"
            >
              <X size={14} />
            </button>
          </div>
        );
      })}
    </div>
  );
}
