import type { ReactNode } from 'react';

export function PageHeader(props: { eyebrow: string; title: string; description?: string; action?: ReactNode }) {
  return (
    <div className="pageHeader">
      <div>
        <p className="eyebrow">{props.eyebrow}</p>
        <h1>{props.title}</h1>
        {props.description && <p>{props.description}</p>}
      </div>
      {props.action && <div className="pageHeaderAction">{props.action}</div>}
    </div>
  );
}