// <Header> — the agent page's identity strip: icon, glyphic title, the
// "swarm / hive" label row, and a slot for the status row
// (`<StatusChips>` — ../status-chips/, kept separate so this component
// has no opinion on what badges exist). Structurally the same
// three-row shape as the old `#agent-header` markup in index.html
// (icon · main · pills) — see `docs/web-ui.md::Per-agent page` — this
// is a like-for-like layout port, the redesign work is in the children.
// Reuses `agent.css`'s existing `.agent-header*`/`.agent-icon` rules
// (loaded globally by index.html) rather than a component-scoped
// stylesheet — no new visual language needed for the chrome itself.
import type { ComponentChildren } from 'preact';

export interface HeaderProps {
  label: string;
  hiveLabel?: string | null;
  children?: ComponentChildren;
  /** Right-cluster flyout triggers (inbox/todos pills today, the
   * overflow menu button lands here in a later commit) — mirrors the
   * old markup's `.agent-header-pills` third column. */
  pills?: ComponentChildren;
}

export function Header({ label, hiveLabel, children, pills }: HeaderProps) {
  return (
    <header class="agent-header">
      <img class="agent-icon" src="icon" alt="" />
      <div class="agent-header-main">
        <div class="agent-header-row agent-header-title-row">
          <h2 class="agent-header-title">◆ {label} ◆</h2>
        </div>
        {hiveLabel ? <div class="agent-header-row agent-hive-row">{hiveLabel}</div> : null}
        <div class="agent-header-row">{children}</div>
      </div>
      {pills ? <div class="agent-header-pills">{pills}</div> : null}
    </header>
  );
}