import type { JSXElement } from "solid-js";

export function PageHeading(props: {
  eyebrow: string;
  title: string;
  description: string;
  actions?: JSXElement;
}) {
  return (
    <header class="page-heading">
      <div>
        <span class="eyebrow">{props.eyebrow}</span>
        <h1>{props.title}</h1>
        <p>{props.description}</p>
      </div>
      {props.actions && <div class="heading-actions">{props.actions}</div>}
    </header>
  );
}
