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

const NAV_ITEMS = [
  { to: '/agents', label: 'Agent Map', icon: '🗺️' },
  { to: '/phases', label: 'Phases', icon: '⚡' },
  { to: '/hooks', label: 'Hooks', icon: '🔗' },
  { to: '/skills', label: 'Skills', icon: '🧩' },
  { to: '/rules', label: 'Rules', icon: '📏' },
  { to: '/standards', label: 'Standards', icon: '📋' },
  { to: '/state', label: 'Live State', icon: '📊' },
];

export default function Sidebar() {
  return (
    <nav className="w-52 flex-shrink-0 bg-gray-900 border-r border-gray-800 flex flex-col">
      <div className="px-4 py-4 border-b border-gray-800">
        <h1 className="text-sm font-semibold text-gray-300 tracking-wide uppercase">
          morph-spec
        </h1>
        <p className="text-xs text-gray-500 mt-0.5">Dashboard</p>
      </div>
      <ul className="flex-1 py-2">
        {NAV_ITEMS.map(({ to, label, icon }) => (
          <li key={to}>
            <NavLink
              to={to}
              className={({ isActive }) =>
                [
                  'flex items-center gap-2.5 px-4 py-2 text-sm transition-colors',
                  isActive
                    ? 'bg-blue-900/40 border-r-2 border-blue-500 text-blue-300'
                    : 'text-gray-400 hover:bg-gray-800 hover:text-gray-200',
                ].join(' ')
              }
            >
              <span className="text-base leading-none">{icon}</span>
              <span>{label}</span>
            </NavLink>
          </li>
        ))}
      </ul>
    </nav>
  );
}