import React from 'react';
import { 
  Wrench, 
  LayoutDashboard, 
  CalendarDays, 
  Package, 
  Users, 
  Clock, 
  Database 
} from 'lucide-react';

interface SidebarProps {
  activeTab: string;
  setActiveTab: (tab: string) => void;
}

export const Sidebar: React.FC<SidebarProps> = ({ activeTab, setActiveTab }) => {
  const menuItems = [
    { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
    { id: 'dispatching', label: 'Dispatching', icon: CalendarDays },
    { id: 'lager', label: 'Lager & Teile', icon: Package },
    { id: 'monteure', label: 'Monteure', icon: Users },
    { id: 'zeiterfassung', label: 'Zeiterfassung', icon: Clock },
    { id: 'supabase', label: 'Supabase Sync', icon: Database },
  ];

  return (
    <aside className="sidebar">
      <div className="brand">
        <Wrench className="brand-icon" size={24} />
        <span>Handwerksfreund</span>
      </div>

      <nav>
        <ul className="nav-list">
          {menuItems.map((item) => {
            const Icon = item.icon;
            const isActive = activeTab === item.id;
            return (
              <li key={item.id}>
                <button
                  className={`nav-item ${isActive ? 'active' : ''}`}
                  onClick={() => setActiveTab(item.id)}
                  style={{ width: '100%', background: 'none', border: 'none', textAlign: 'left' }}
                >
                  <Icon className="icon" size={20} />
                  <span>{item.label}</span>
                </button>
              </li>
            );
          })}
        </ul>
      </nav>
    </aside>
  );
};
