import type { ReactNode } from "react";

export function PageHeader({ eyebrow, title, intro, children, dark = false }: { eyebrow: ReactNode; title: ReactNode; intro?: ReactNode; children?: ReactNode; dark?: boolean }) {
  return (
    <section className={`${dark ? "grain bg-ink text-white" : ""}`}>
      <div className="mx-auto max-w-7xl px-5 pt-14 pb-10">
        <p className={`eyebrow ${dark ? "text-white/60" : ""}`}>{eyebrow}</p>
        <h1 className="display mt-3 max-w-4xl">{title}</h1>
        {intro && <p className={`mt-5 max-w-2xl text-lg ${dark ? "text-white/75" : "text-ink/70"}`}>{intro}</p>}
        {children && <div className="mt-8">{children}</div>}
      </div>
    </section>
  );
}