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
}

// Right-side space for the appbar's floating actions pill is reserved by
// the AppShell's first-child padding rule, not here — keep this layout
// concerned only with title/description/actions composition.

export function PageHeader({
  title,
  description,
  badges,
  actions,
}: PageHeaderProps) {
  return (
    <header className="flex flex-col gap-2">
      <div className="flex flex-wrap items-center gap-3">
        <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
        {badges}
      </div>
      {description ? (
        <p className="max-w-3xl text-sm text-muted-foreground">{description}</p>
      ) : null}
      {actions ? (
        <div className="mt-1 flex flex-wrap items-center gap-2">{actions}</div>
      ) : null}
    </header>
  )
}