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

export function PageHeading(props: {
  eyebrow: string;
  title: string;
  description: string;
  actions?: JSXElement;
}) {
  return (
    <header class="mb-5 flex flex-col justify-between gap-4 sm:flex-row sm:items-end">
      <div>
        <span class="text-[11px] font-bold uppercase text-cyan-strong">{props.eyebrow}</span>
        <h1 class="mt-1 text-2xl font-bold text-ink">{props.title}</h1>
        <p class="mt-1 max-w-3xl text-sm text-muted">{props.description}</p>
      </div>
      {props.actions && <div class="flex shrink-0 items-center gap-2">{props.actions}</div>}
    </header>
  );
}
