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>
  );
}