/**
 * TaxiBook Partner - Navigation Components
 * =========================================
 * Sidebar
 */

const Sidebar = ({ partner, currentView, setCurrentView, onLogout }) => {
    const navItems = [
        { id: 'booking', icon: 'fa-taxi', label: 'Réserver' },
        { id: 'rides', icon: 'fa-car', label: 'Courses' },
        { id: 'map', icon: 'fa-map-marked-alt', label: 'Carte' },
        { id: 'packages', icon: 'fa-route', label: 'Forfaits' },
        { id: 'history', icon: 'fa-history', label: 'Historique' },
        { id: 'cards', icon: 'fa-credit-card', label: 'Cartes' },
        { id: 'minisites', icon: 'fa-globe', label: 'Mini Sites' },
        { id: 'profile', icon: 'fa-building', label: 'Profil' },
    ];

    return (
        <nav className="w-20 lg:w-64 gradient-bg flex flex-col h-screen fixed left-0 top-0 z-40">
            {/* Logo */}
            <div className="p-4 lg:p-6 border-b border-dark-700">
                <div className="flex items-center gap-3">
                    <div className="w-12 h-12 gradient-primary rounded-xl flex items-center justify-center">
                        <i className="fas fa-building text-white text-xl"></i>
                    </div>
                    <div className="hidden lg:block">
                        <h1 className="text-white font-bold text-lg">TaxiBook</h1>
                        <p className="text-dark-400 text-xs">Partner Portal</p>
                    </div>
                </div>
            </div>

            {/* Partner Name */}
            <div className="p-4 lg:p-6 border-b border-dark-700 hidden lg:block">
                <p className="text-dark-400 text-xs uppercase tracking-wider mb-1">Partenaire</p>
                <p className="text-white font-semibold truncate">{partner?.name || 'Partenaire'}</p>
            </div>

            {/* Navigation */}
            <div className="flex-1 p-4 space-y-2">
                {navItems.map(item => (
                    <button
                        key={item.id}
                        onClick={() => setCurrentView(item.id)}
                        className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition ${
                            currentView === item.id
                                ? 'bg-primary-500 text-white'
                                : 'text-dark-400 hover:bg-dark-800 hover:text-white'
                        }`}
                    >
                        <i className={`fas ${item.icon} text-lg`}></i>
                        <span className="hidden lg:block font-medium">{item.label}</span>
                    </button>
                ))}
            </div>

            {/* Logout */}
            <div className="p-4 border-t border-dark-700">
                <button
                    onClick={onLogout}
                    className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-red-400 hover:bg-red-500/10 transition"
                >
                    <i className="fas fa-sign-out-alt text-lg"></i>
                    <span className="hidden lg:block font-medium">Déconnexion</span>
                </button>
            </div>
        </nav>
    );
};