'use client';

import {useEffect, useState} from 'react';
import {createPortal} from 'react-dom';
import StaticAlert from '@/components/StaticAlert';
import {Alert} from '@/context/AlertProvider';

interface AlertStackProps {
    alerts: Alert[];
    onClose: (id: string) => void;
}

export default function AlertStack({alerts, onClose}: AlertStackProps) {
    const [mounted, setMounted] = useState(false);
    
    useEffect(() => {
        setMounted(true);
        return () => setMounted(false);
    }, []);
    
    if (!mounted) return null;
    
    const alertContent = (
        <div className="fixed top-4 right-4 z-50 flex flex-col gap-3 pointer-events-none">
            {alerts.map((alert, index) => (
                <div
                    key={alert.id}
                    className="pointer-events-auto"
                    style={{
                        animation: 'slideInFromRight 0.3s ease-out forwards',
                        animationDelay: `${index * 50}ms`,
                    }}
                >
                    <StaticAlert
                        type={alert.type}
                        message={alert.message}
                        onClose={() => onClose(alert.id)}
                    />
                </div>
            ))}
            <style>{`
                @keyframes slideInFromRight {
                    from {
                        transform: translateX(400px);
                        opacity: 0;
                    }
                    to {
                        transform: translateX(0);
                        opacity: 1;
                    }
                }
            `}</style>
        </div>
    );
    
    return createPortal(alertContent, document.body);
}