import { useState } from 'react';
import { Sidebar, Button } from '@cap-rel/smartcommon';
import { useNavigation, useGlobalStates, useApi } from '@cap-rel/smartcommon';
import { FiHome, FiList, FiSettings, FiLogOut } from 'react-icons/fi';

function MainLayout({ children }) {
    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
    const navigate = useNavigation();
    const api = useApi();
    const [session] = useGlobalStates('session');

    const menuItems = [
        { icon: FiHome, label: 'Accueil', path: '/' },
        { icon: FiList, label: 'Produits', path: '/products' },
        { icon: FiSettings, label: 'Paramètres', path: '/settings' }
    ];

    const handleLogout = async () => {
        await api.logout();
        navigate('/login');
    };

    return (
        <>
            <Sidebar
                isOpen={isSidebarOpen}
                onClose={() => setIsSidebarOpen(false)}
            >
                {/* En-tête utilisateur */}
                <div className="p-4 border-b">
                    <p className="font-bold">{session?.user?.name}</p>
                    <p className="text-sm text-gray-500">{session?.user?.email}</p>
                </div>

                {/* Menu */}
                <nav className="p-2">
                    {menuItems.map(item => (
                        <button
                            key={item.path}
                            onClick={() => {
                                navigate(item.path);
                                setIsSidebarOpen(false);
                            }}
                            className="flex items-center gap-3 w-full p-3 rounded hover:bg-gray-100"
                        >
                            <item.icon />
                            {item.label}
                        </button>
                    ))}
                </nav>

                {/* Déconnexion */}
                <div className="p-4 border-t mt-auto">
                    <Button onClick={handleLogout} variant="outline" className="w-full">
                        <FiLogOut className="mr-2" />
                        Déconnexion
                    </Button>
                </div>
            </Sidebar>

            {children}
        </>
    );
}