import { Outlet, NavLink } from 'react-router-dom';
import clsx from 'clsx';

const nav = [
  { to: '/dashboard', label: 'Dashboard', icon: '📊' },
  { to: '/rules', label: 'Routing Rules', icon: '🔀' },
  { to: '/keys', label: 'API Keys', icon: '🔑' },
  { to: '/settings', label: 'Settings', icon: '⚙️' },
];

export default function Layout() {
  return (
    <div className="flex h-screen">
      {/* Sidebar */}
      <aside className="w-56 bg-dd0c-surface border-r border-dd0c-border flex flex-col">
        <div className="p-4 border-b border-dd0c-border">
          <h1 className="text-lg font-bold">
            <span className="text-dd0c-primary">dd0c</span>
            <span className="text-dd0c-muted">/route</span>
          </h1>
          <p className="text-xs text-dd0c-muted mt-1">LLM Cost Router</p>
        </div>
        <nav className="flex-1 p-2 space-y-1" aria-label="Main navigation">
          {nav.map((item) => (
            <NavLink
              key={item.to}
              to={item.to}
              className={({ isActive }) =>
                clsx(
                  'flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors',
                  isActive
                    ? 'bg-dd0c-primary/10 text-dd0c-primary'
                    : 'text-dd0c-muted hover:text-dd0c-text hover:bg-dd0c-border/50'
                )
              }
            >
              <span>{item.icon}</span>
              <span>{item.label}</span>
            </NavLink>
          ))}
        </nav>
        <div className="p-4 border-t border-dd0c-border text-xs text-dd0c-muted">
          v0.1.0
        </div>
      </aside>

      {/* Main content */}
      <main className="flex-1 overflow-auto p-6">
        <Outlet />
      </main>
    </div>
  );
}
