"use client";

import { useEffect, useState } from "react";
import { X } from "lucide-react";

interface ToastProps {
    message: string;
    onClose: () => void;
    duration?: number;
}

export default function Toast({ message, onClose, duration = 5000 }: ToastProps) {
    const [visible, setVisible] = useState(true);

    useEffect(() => {
        const timer = setTimeout(() => {
            setVisible(false);
            setTimeout(onClose, 300); // Wait for fade out animation
        }, duration);

        return () => clearTimeout(timer);
    }, [duration, onClose]);

    if (!message) return null;

    return (
        <div
            className={`fixed top-5 left-1/2 transform -translate-x-1/2 z-50 flex items-center gap-3 px-4 py-3 bg-red-600 text-white rounded-lg shadow-lg transition-opacity duration-300 ${visible ? "opacity-100" : "opacity-0"
                }`}
        >
            <span className="text-sm font-medium">{message}</span>
            <button onClick={() => setVisible(false)} className="hover:opacity-80">
                <X size={16} />
            </button>
        </div>
    );
}