import type { PropsWithChildren } from "react";

export function PageHeader({
  actions,
  description,
  eyebrow,
  title,
}: {
  actions?: PropsWithChildren["children"];
  description?: string;
  eyebrow?: string;
  title: string;
}) {
  return (
    <div className="flex flex-wrap items-end justify-between gap-4 rounded-[var(--uhuru-radius-lg)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] px-5 py-5">
      <div className="grid gap-2">
        {eyebrow ? (
          <span className="text-xs uppercase tracking-[0.16em] text-[var(--uhuru-accent-strong)]">
            {eyebrow}
          </span>
        ) : null}
        <h2
          className="m-0 text-3xl tracking-[-0.04em] text-[var(--uhuru-text-primary)]"
          style={{ fontFamily: "var(--uhuru-font-heading)" }}
        >
          {title}
        </h2>
        {description ? (
          <p className="m-0 max-w-2xl text-sm leading-6 text-[var(--uhuru-text-secondary)]">
            {description}
          </p>
        ) : null}
      </div>
      {actions}
    </div>
  );
}