import type { ReactNode } from "react";
import { Breadcrumbs, type Crumb } from "@/components/Breadcrumbs";
import { OrganicBlob } from "@/components/OrganicBlob";

type PageHeaderProps = {
  eyebrow?: string;
  title: string;
  lead?: ReactNode;
  crumbs?: Crumb[];
};

export function PageHeader({ eyebrow, title, lead, crumbs }: PageHeaderProps) {
  return (
    <section className="relative overflow-hidden border-b border-anouma-taupe/10 bg-anouma-cream-light pb-16 pt-14 sm:pb-20 sm:pt-20">
      <OrganicBlob tone="rose" className="-right-20 -top-20 h-72 w-72" />
      <div className="relative mx-auto max-w-6xl px-6 sm:px-8 lg:px-12">
        {crumbs && <Breadcrumbs items={crumbs} />}
        {eyebrow && (
          <p className="mb-4 text-xs font-medium uppercase tracking-[0.24em] text-anouma-plum">
            {eyebrow}
          </p>
        )}
        <h1 className="max-w-3xl text-balance font-serif text-4xl font-medium leading-tight text-anouma-plum sm:text-5xl lg:text-6xl">
          {title}
        </h1>
        {lead && (
          <div className="mt-5 max-w-2xl text-lg leading-relaxed text-anouma-plum">{lead}</div>
        )}
      </div>
    </section>
  );
}