import { type ReactNode } from "react"

interface PageHeaderProps {
  title: ReactNode
  description?: ReactNode
  /** Inline indicators after the title (badges, status pills). */
  badges?: ReactNode
  /** Toolbar rendered below the title row — primary actions go here. */
  actions?: ReactNode
}

// Shared page header for the app's main surfaces. Keeps the title/description
// pattern consistent across routes so forks don't reinvent it per page.
export function PageHeader({
  title,
  description,
  badges,
  actions,
}: PageHeaderProps) {
  return (
    <header className="flex flex-col gap-3">
      <div className="flex flex-wrap items-end gap-4">
        <h1 className="text-headline font-semibold tracking-tight">{title}</h1>
        {badges}
      </div>
      {description ? (
        <p className="max-w-2xl text-[15px] leading-relaxed text-muted-foreground">
          {description}
        </p>
      ) : null}
      {actions ? (
        <div className="mt-2 flex flex-wrap items-center gap-2">{actions}</div>
      ) : null}
    </header>
  )
}