'use client';

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

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

export function Toast({ message, type, onClose }: ToastProps) {
  useEffect(() => {
    const timer = setTimeout(onClose, 4000);
    return () => clearTimeout(timer);
  }, [onClose]);

  return (
    <div className={`
      fixed bottom-6 right-6 z-50 flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium
      shadow-lg shadow-black/5 animate-slide-up
      ${type === 'success'
        ? 'bg-white text-emerald-800 border border-emerald-200'
        : 'bg-white text-red-800 border border-red-200'
      }
    `}>
      {type === 'success'
        ? <CheckCircle2 className="w-4 h-4 text-emerald-500 flex-shrink-0" />
        : <AlertCircle className="w-4 h-4 text-red-500 flex-shrink-0" />
      }
      <span className="max-w-xs">{message}</span>
      <button
        onClick={onClose}
        className="ml-1 p-0.5 rounded text-stone-400 hover:text-stone-600 hover:bg-stone-100 transition-colors"
      >
        <X className="w-3.5 h-3.5" />
      </button>
    </div>
  );
}
