"use client";

import { usePathname } from "next/navigation";
import type { DataspaceNav } from "@/lib/catalog";

/**
 * Sticky header shell adapted from OnCo SiteHeader.
 * Copyright (c) 2026 OnCo. MIT License. See ui/NOTICE.
 * The OnCo mark and command palette are not included.
 * Kind links come from the snapshot registry passed in by the layout.
 */
export function SiteHeader({ dataspaces }: { dataspaces: DataspaceNav[] }) {
  const path = usePathname() ?? "/";
  const active = dataspaces.find((item) => path === `/${item.id}` || path.startsWith(`/${item.id}/`)) ?? dataspaces.find((item) => item.id === "systems-thinking") ?? dataspaces[0];
  return (
    <header className="sticky top-0 z-40 border-b border-border bg-background/80 backdrop-blur-md supports-[backdrop-filter]:bg-background/75">
      <div className="mx-auto flex h-14 max-w-7xl items-center gap-4 px-4 sm:gap-6 sm:px-6">
        <a href="/" className="inline-flex h-10 shrink-0 items-center rounded-lg font-semibold tracking-tight" aria-label="Content Explorer home">
          <span className="text-[15px]">Content Explorer</span>
        </a>
        {active ? (
          <nav aria-label="Primary" className="flex min-w-0 items-center gap-4 overflow-x-auto text-sm">
            <a href={`/${active.id}/`} className="shrink-0 text-foreground">{active.title}</a>
            {active.kinds.map((kind) => (
              <a key={kind.id} href={kind.href} className="shrink-0 text-muted hover:text-foreground">
                {kind.plural}
              </a>
            ))}
          </nav>
        ) : null}
      </div>
    </header>
  );
}