ERitors-Scribe-Desktop/components/ui/AlertStack.tsx

'use client';

import React from 'react';
import {createPortal} from 'react-dom';
import StaticAlert from '@/components/ui/StaticAlert';
import {Alert} from '@/context/AlertProvider';

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

export default function AlertStack({alerts, onClose}: AlertStackProps) {
    const [mounted, setMounted] = React.useState(false);
    
    React.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 alert-slide-in"
                    ref={(el: HTMLDivElement | null): void => {
                        if (el) el.style.animationDelay = `${index * 50}ms`;
                    }}
                >
                    <StaticAlert
                        type={alert.type}
                        message={alert.message}
                        onClose={() => onClose(alert.id)}
                    />
                </div>
            ))}
        </div>
    );
    
    return createPortal(alertContent, document.body);
}