import type { ReactNode } from "react";
import { SectionHeading } from "./SectionHeading";

type Props = {
  eyebrow?: string;
  title: ReactNode;
  lead?: ReactNode;
  width?: "narrow" | "default" | "wide";
  children?: ReactNode;
};

const widths = {
  narrow: "max-w-3xl",
  default: "max-w-6xl",
  wide: "max-w-7xl",
};

/**
 * Top block of an inner page. Carries the offset for the fixed navbar
 * (previously a `pt-32` copy-pasted into every page).
 */
export function PageHeader({
  eyebrow,
  title,
  lead,
  width = "default",
  children,
}: Props) {
  return (
    <section className="px-6 pb-12 pt-32 sm:pb-16 sm:pt-40 lg:px-10">
      <div className={`mx-auto w-full ${widths[width]}`}>
        <SectionHeading
          level="page"
          eyebrow={eyebrow}
          title={title}
          lead={lead}
        />
        {children && <div className="mt-10">{children}</div>}
      </div>
    </section>
  );
}