'use client'
import { CloseCircle, InfoCircle, TickCircle } from 'iconsax-react';
import React, { useState, useEffect } from 'react';

interface Toast {
    id: string;
    message: string;
    type?: 'success' | 'error' | 'info';
}

let addToast: (toast: Toast) => void = () => {};

const ToastContainer: React.FC = () => {
    const [toasts, setToasts] = useState<Toast[]>([]);

    const showToast = (toastItem: Toast) => {
        setToasts((prev) => [...prev, toastItem]);

        setTimeout(() => {
            setToasts((prev) => prev.filter((t) => t.id !== toastItem.id));
        }, 3000);
    };

    useEffect(() => {
        addToast = showToast;
    }, []);

    return (
        <div className="fixed top-4 text-sm right-0 left-0 mx-auto w-fit z-50 flex flex-col gap-2">
            {toasts.map((toastItem) => (
                <div
                    key={toastItem.id}
                    className="px-4 flex items-center gap-2 backdrop-blur-2xl h-16 min-w-[300px] rounded-2xl shadow-md transition-transform bg-white/70 text-black"
                >
                    {toastItem.type === 'success' ? (
                        <TickCircle className="size-5" color="green" />
                    ) : toastItem.type === 'error' ? (
                        <CloseCircle className="size-5" color="red" />
                    ) : (
                        <InfoCircle className="size-5" color="blue" />
                    )}
                    {toastItem.message}
                </div>
            ))}
        </div>
    );
};

export const toast = (message: string | undefined, type: 'success' | 'error' | 'info' = 'info') => {
    if (!message) return;
    addToast({ id: `${Date.now()}-${Math.random()}`, message, type });
};

export default ToastContainer;
