frontend/src/components/Sidebar.jsx

/**
 * Sidebar.jsx
 * Fixed left navigation bar for the dashboard.
 */
import { Brain, FileText, LayoutDashboard, Info } from 'lucide-react';

export default function Sidebar({ activeTab, setActiveTab }) {
  const navItems = [
    { id: 'input', label: 'New Screening', icon: LayoutDashboard },
    { id: 'results', label: 'Results', icon: FileText },
  ];

  return (
    <aside className="w-64 min-h-screen bg-slate-900 border-r border-slate-800 flex flex-col fixed left-0 top-0 z-40">
      {/* Logo */}
      <div className="p-6 border-b border-slate-800">
        <div className="flex items-center gap-3">
          <div className="w-9 h-9 rounded-xl bg-primary-600 flex items-center justify-center shadow-lg shadow-primary-900/50">
            <Brain size={20} className="text-white" />
          </div>
          <div>
            <h1 className="text-base font-bold text-white leading-tight">HireIQ</h1>
            <p className="text-xs text-slate-500">AI Resume Screener</p>
          </div>
        </div>
      </div>

      {/* Navigation */}
      <nav className="flex-1 p-4 space-y-1">
        {navItems.map(({ id, label, icon: Icon }) => (
          <button
            key={id}
            id={`nav-${id}`}
            onClick={() => setActiveTab(id)}
            className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium transition-all duration-200 ${
              activeTab === id
                ? 'bg-primary-600/20 text-primary-300 border border-primary-700/40'
                : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800'
            }`}
          >
            <Icon size={18} />
            {label}
          </button>
        ))}
      </nav>

      {/* Footer info */}
      <div className="p-4 border-t border-slate-800">
        <div className="flex items-start gap-3 p-3 rounded-xl bg-slate-800/50">
          <Info size={16} className="text-slate-500 mt-0.5 flex-shrink-0" />
          <div>
            <p className="text-xs text-slate-400 font-medium">Scoring Model</p>
            <p className="text-xs text-slate-500 mt-1 leading-relaxed">
              40% Skills · 20% Exp · 15% Edu · 10% Certs · 10% Projects · 5% Bonus
            </p>
          </div>
        </div>
      </div>
    </aside>
  );
}