import { useEffect, useState } from "react";
import "./Toast.css";

interface ToastProps {
    message: string;
    type?: "success" | "error" | "warning" | "info";
    duration?: number;
    onClose?: () => void;
}

export function Toast({
    message,
    type = "success",
    duration = 3000,
    onClose,
}: ToastProps) {
    const [isVisible, setIsVisible] = useState(true);

    useEffect(() => {
        const timer = setTimeout(() => {
            setIsVisible(false);
            onClose?.();
        }, duration);

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

    if (!isVisible) return null;

    const getIcon = () => {
        const icons = {
            success: "✓",
            error: "✕",
            warning: "⚠",
            info: "ℹ",
        };
        return icons[type];
    };

    return (
        <div className={`toast toast-${type}`}>
            <div className="toast-content">
                <div className="toast-icon">{getIcon()}</div>
                <div className="toast-message">{message}</div>
            </div>
            <div
                className="toast-progress"
                style={{ animationDuration: `${duration}ms` }}
            />
        </div>
    );
}

export default Toast;