interface PageHeaderProps {
  title: string;
  /** Human-written line under the title (sans). Keep it short or leave it out. */
  subtitle?: string;
  /** Machine values — counts, sizes, durations. Rendered mono, per Ethos law 1. */
  meta?: string;
  /** Optional right-aligned actions (buttons, toggles, etc.). */
  actions?: React.ReactNode;
}

/**
 * The one page heading for every screen (Ethos law 3 — shared shell). Editorial
 * sans title, an optional human subtitle, and a mono `meta` line for whatever
 * the machine knows: counts, page position, queue depth.
 *
 * Deliberately has no icon chip and no gradient fill. The nav rail and the
 * breadcrumb already name the page; a glowing accent tile on every screen made
 * the accent read as decoration rather than signal.
 */
export function PageHeader({ title, subtitle, meta, actions }: PageHeaderProps) {
  return (
    <div className="flex flex-wrap items-end justify-between gap-3 border-b border-border pb-3 animate-rise">
      <div className="min-w-0">
        <h1 className="truncate text-2xl font-semibold tracking-tight text-text sm:text-3xl">
          {title}
        </h1>
        {subtitle && <p className="mt-1 text-sm text-secondary">{subtitle}</p>}
        {meta && (
          <p className="mt-1 truncate font-mono text-xs tabular-nums text-muted">{meta}</p>
        )}
      </div>
      {actions && <div className="flex flex-none flex-wrap items-center gap-2">{actions}</div>}
    </div>
  );
}
