import { useEffect, useState } from 'react';
import { Sidebar } from './Sidebar';

interface SidebarOverlayProps {
    onClose: () => void;
}

export function SidebarOverlay({ onClose }: SidebarOverlayProps) {
    const [visible, setVisible] = useState(false);

    useEffect(() => {
        // Trigger enter animation on next frame
        const id = requestAnimationFrame(() => setVisible(true));
        return () => cancelAnimationFrame(id);
    }, []);

    return (
        <div className="fixed inset-0 z-40 md:hidden" data-testid="sidebar-overlay">
            <div
                className="absolute inset-0 bg-black/50"
                onClick={onClose}
                data-testid="sidebar-backdrop"
            />
            <div
                className={`absolute left-0 top-0 h-full w-64 shadow-xl transition-transform duration-200 ${visible ? 'translate-x-0' : '-translate-x-full'}`}
            >
                <Sidebar onClose={onClose} />
            </div>
        </div>
    );
}