import React from 'react';
import Sidebar from './Sidebar';
import { Menu } from 'lucide-react';
import { useSidebar } from '../context/SidebarContext';

export default function Layout({ children }) {
    const { open, toggle } = useSidebar();
    return (
        <div className="min-h-screen bg-[#F8FAFC]">
            <Sidebar />

            {/* Bouton hamburger flottant visible UNIQUEMENT quand la sidebar est fermée */}
            {!open && (
                <button
                    onClick={toggle}
                    data-testid="sidebar-toggle"
                    aria-label="Ouvrir le menu"
                    className="fixed top-3 left-3 z-30 h-11 w-11 rounded-full bg-white shadow-lg ring-1 ring-slate-200 flex items-center justify-center text-slate-700 hover:bg-slate-50 active:scale-95 transition-all duration-200"
                >
                    <Menu className="h-5 w-5" />
                </button>
            )}

            <main
                className={`min-h-screen transition-[margin] duration-300 ease-in-out ${open ? 'lg:ml-64' : 'lg:ml-0'}`}
            >
                <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-16 sm:pt-12 pb-5 sm:pb-8">
                    {children}
                </div>
            </main>
        </div>
    );
}
