// <Shell> — page chrome every swarm-ui route mounts inside: a header
// bar (swarm branding) plus a nav row linking the app's real routes.
// Preact-native styling (shell/Shell.css, imported globally via
// ../swarm-ui.css) — deliberately not @hive/shared's chrome.css
// page-header pattern, which is the per-hive MPA dashboard's visual
// language. This package is a clean field, not an inheritor of that
// look.
//
// Route list lives here, not prop-drilled from App — one small SPA
// has exactly one place that needs to know its own nav, and this is
// it. Grows additively as real routes land (a swarm-wide agent roster
// is next); no speculative entries.
import type { ComponentChildren } from 'preact';
import { Link, useRoute } from 'wouter-preact';

const NAV_ITEMS: { href: string; label: string }[] = [{ href: '/', label: 'overview' }];

function NavLink({ href, label }: { href: string; label: string }) {
  const [active] = useRoute(href);
  return (
    <Link href={href} className={'shell-nav-link' + (active ? ' shell-nav-link-active' : '')}>
      {label}
    </Link>
  );
}

export function Shell({ children }: { children: ComponentChildren }) {
  return (
    <div class="shell">
      <header class="shell-header">
        <span class="shell-brand">hyperhive swarm</span>
        <nav class="shell-nav">
          {NAV_ITEMS.map((item) => (
            <NavLink key={item.href} href={item.href} label={item.label} />
          ))}
        </nav>
      </header>
      <div class="shell-body">{children}</div>
    </div>
  );
}