import * as React from "react";
import { cn } from "@/lib/utils";

/**
 * The shared page header. Every page renders one — the eyebrow +
 * display title + optional subtitle + actions gives every screen a
 * consistent top, with the editorial serif headline providing a
 * moment of weight in an otherwise utility-heavy UI.
 *
 * The eyebrow carries an optional live status pill on the right so
 * pages with a live-tail (Claims, Remittances, Activity) can show the
 * connection state inline with the page title, not in the toolbar.
 */
export function PageHeader({
  eyebrow,
  title,
  subtitle,
  actions,
  status,
  className,
}: {
  eyebrow: string;
  title: React.ReactNode;
  subtitle?: React.ReactNode;
  actions?: React.ReactNode;
  status?: React.ReactNode;
  className?: string;
}) {
  return (
    <header className={cn("flex items-end justify-between gap-6 flex-wrap", className)}>
      <div className="min-w-0">
        <div className="eyebrow flex items-center gap-2 mb-2.5">
          <span className="inline-block h-px w-6 bg-foreground/20" />
          {eyebrow}
        </div>
        <h1 className="display text-[28px] sm:text-[32px] leading-[1.1] text-foreground">
          {title}
        </h1>
        {subtitle ? (
          <p className="text-muted-foreground mt-2 text-[13.5px] leading-relaxed max-w-2xl">
            {subtitle}
          </p>
        ) : null}
      </div>
      <div className="flex items-center gap-3 flex-wrap justify-end">
        {status}
        {actions}
      </div>
    </header>
  );
}
