import { NavLink } from 'react-router-dom';
import {
  LayoutDashboard, Users, BriefcaseMedical, ScanLine, Bot, Boxes,
  Smile, Layers, Factory, ShieldCheck, FileText, Settings, Hexagon
} from 'lucide-react';

const items = [
  ['/', 'Dashboard', LayoutDashboard],
  ['/patients', 'Patient Manager', Users],
  ['/cases', 'Case Manager', BriefcaseMedical],
  ['/scans', 'Scan Manager', ScanLine],
  ['/design', 'AI Assistant', Bot],
  ['/design', 'Design Studio', Boxes],
  ['/libraries', 'Tooth Library', Smile],
  ['/libraries', 'Material Library', Layers],
  ['/manufacturing', 'Manufacturing', Factory],
  ['/quality', 'Quality Control', ShieldCheck],
  ['/reports', 'Reports', FileText],
  ['/settings', 'Settings', Settings]
];

const LeftSidebar = () => (
  <aside className="hidden w-[170px] shrink-0 flex-col border-r border-white/[.06] bg-[#0c0e12] py-3 md:flex">
    <nav className="flex-1 space-y-0.5 overflow-y-auto px-2">
      {items.map(([to, label, Icon], i) => (
        <NavLink key={i} to={to} end={to === '/'} className={({ isActive }) =>
          `flex items-center gap-2.5 rounded-md px-2.5 py-2 text-[11px] transition ${isActive ? 'border-l-2 border-cyan-400 bg-cyan-400/10 text-cyan-300' : 'border-l-2 border-transparent text-slate-500 hover:bg-white/[.03] hover:text-white'}`
        }>
          <Icon className="h-3.5 w-3.5 shrink-0" />
          <span className="truncate">{label}</span>
        </NavLink>
      ))}
    </nav>
    <div className="px-3 pt-4">
      <div className="grid h-14 w-14 place-items-center rounded-xl border border-cyan-400/20 bg-cyan-400/[.06] text-cyan-300">
        <Hexagon className="h-10 w-10 opacity-80" />
        <span className="absolute text-[8px] font-black">S</span>
      </div>
      <div className="mt-2 text-[8px] uppercase tracking-[.2em] text-slate-600">SHiRE Engine</div>
    </div>
  </aside>
);
export default LeftSidebar;