import React from 'react';
import { FileText, Table, Box, DollarSign, Package } from 'lucide-react';
import { cn } from '../lib/utils';

interface SidebarProps {
  activeModule: string;
  setActiveModule: (m: 'descriptions' | 'article_details' | 'matrix' | 'dimensions' | 'pricing') => void;
}

export function Sidebar({ activeModule, setActiveModule }: SidebarProps) {
  const navItems = [
    { id: 'matrix', label: 'Matrix', icon: Table },
    { id: 'descriptions', label: 'Product Descriptions', icon: FileText },
    { id: 'article_details', label: 'Article Details', icon: Package },
    { id: 'dimensions', label: 'Dimensions', icon: Box },
    { id: 'pricing', label: 'Pricing & Units', icon: DollarSign },
  ] as const;

  return (
    <aside className="w-60 bg-slate-800 border-r border-slate-700 flex flex-col shrink-0">
      <div className="p-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">
        Modules
      </div>
      <nav className="flex-1 px-2 space-y-1">
        {navItems.map((item) => {
          const Icon = item.icon;
          const isActive = activeModule === item.id;
          return (
            <button
              key={item.id}
              onClick={() => setActiveModule(item.id)}
              className={cn(
                "w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-sm font-medium transition-colors",
                isActive
                  ? "bg-blue-600/10 text-blue-400"
                  : "text-slate-300 hover:bg-slate-700/50 hover:text-white"
              )}
            >
              <Icon className={cn("w-5 h-5", isActive ? "text-blue-500" : "text-slate-400")} />
              {item.label}
            </button>
          );
        })}
      </nav>
    </aside>
  );
}