import { cn } from "@aur-ui/ui/lib/utils";
import type { ReactNode } from "react";

/**
 * Console page head — breadcrumb row, bold title with optional inline badge,
 * quiet description, and a right-aligned action cluster that wraps under the
 * title on narrow screens. Owns the page's top rhythm so every screen opens
 * the same way.
 */
export function PageHeader({
  title,
  description,
  breadcrumb,
  badge,
  actions,
  className,
}: {
  title: ReactNode;
  description?: ReactNode;
  /** A <Breadcrumb> trail rendered above the title. */
  breadcrumb?: ReactNode;
  /** Inline chip next to the title (status, plan, environment). */
  badge?: ReactNode;
  /** Right-aligned buttons; wrap below on narrow screens. */
  actions?: ReactNode;
  className?: string;
}) {
  return (
    <header
      data-slot="page-header"
      className={cn("flex flex-col gap-1.5", className)}
    >
      {breadcrumb}
      <div className="flex flex-wrap items-center gap-x-4 gap-y-3">
        <h1 className="flex min-w-0 items-center gap-2.5 text-2xl font-bold tracking-tight text-ink-900">
          <span className="truncate">{title}</span>
          {badge}
        </h1>
        {actions ? (
          <div className="ml-auto flex shrink-0 items-center gap-2">
            {actions}
          </div>
        ) : null}
      </div>
      {description ? (
        <p className="max-w-2xl text-sm leading-6 text-ink-500">
          {description}
        </p>
      ) : null}
    </header>
  );
}