import { NavLink, Outlet } from 'react-router-dom';
import { PipelineStatus } from './PipelineStatus';

const links = [
  { to: '/', label: 'Overview' },
  { to: '/sessions', label: 'Sessions' },
];

export function Layout() {
  return (
    <div className="min-h-screen flex flex-col bg-surface">
      <header className="bg-surface-raised border-b border-border px-6 py-3 flex items-center justify-between">
        <div className="flex items-center gap-6">
          <h1 className="text-lg font-bold tracking-tight text-text-primary">
            qc-trace
          </h1>
          <nav className="flex gap-1">
            {links.map((l) => (
              <NavLink
                key={l.to}
                to={l.to}
                end
                className={({ isActive }) =>
                  `px-3 py-1.5 rounded text-sm font-medium transition-colors ${
                    isActive
                      ? 'bg-accent text-text-inverse'
                      : 'text-text-secondary hover:text-text-primary hover:bg-surface-overlay'
                  }`
                }
              >
                {l.label}
              </NavLink>
            ))}
          </nav>
        </div>
        <PipelineStatus />
      </header>
      <main className="flex-1 p-6 max-w-7xl mx-auto w-full">
        <Outlet />
      </main>
    </div>
  );
}
