import { NavLink } from 'react-router-dom';

const navItems = [
  { path: '/', label: 'Dashboard', icon: '🏠' },
  { path: '/customers', label: 'Customers', icon: '👤' },
  { path: '/products', label: 'Products', icon: '📦' },
  { path: '/sales', label: 'Sales', icon: '🧾' },
  { path: '/reports', label: 'Reports', icon: '📊' },
];

export default function Sidebar() {
  return (
    <aside className="hidden w-64 shrink-0 flex-col bg-slate-900 text-slate-100 lg:flex">
      <div className="flex items-center gap-3 border-b border-slate-800 px-5 py-4">
        <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-amber-400 to-orange-500 text-slate-950 shadow-sm">
          S
        </div>
        <div>
          <div className="text-sm font-semibold leading-tight">SalesPro SRMS</div>
          <div className="text-xs text-slate-400">Dashboard</div>
        </div>
      </div>

      <nav className="flex-1 space-y-1 px-2 py-4">
        {navItems.map((item) => (
          <NavLink
            key={item.path}
            to={item.path}
            end={item.path === '/customers'}
            className={({ isActive }) =>
              `group flex items-center gap-3 rounded-2xl px-4 py-3 text-sm font-semibold transition ` +
              (isActive
                ? 'bg-white/10 text-white shadow-[0_10px_30px_rgba(0,0,0,0.25)]'
                : 'text-slate-200 hover:bg-white/5 hover:text-white')
            }
          >
            <span className="text-base opacity-90">{item.icon}</span>
            <span className="truncate">{item.label}</span>
          </NavLink>
        ))}
      </nav>
    </aside>
  );
}

