import type { ReactNode } from 'react'

type PageHeadingProps = {
  title: string
  description?: string
  eyebrow?: string
  leading?: ReactNode
  actions?: ReactNode
}

/** A flat, shared page title. Panels belong to the content below it. */
export default function PageHeading({ title, description, eyebrow, leading, actions }: PageHeadingProps) {
  return (
    <header className="page-heading">
      <div className="page-heading-main">
        {leading && <div className="page-heading-leading">{leading}</div>}
        <div className="page-heading-copy">
          {eyebrow && <span className="page-heading-eyebrow">{eyebrow}</span>}
          <h1>{title}</h1>
          {description && <p>{description}</p>}
        </div>
      </div>
      {actions && <div className="page-heading-actions">{actions}</div>}
    </header>
  )
}