import type { ReactNode } from "react";
import { TopoCurvyExtend } from "@/components/brand/TopoCurvyExtend";
import { TopographicPattern } from "@/components/brand/TopographicPattern";
import { TopoProseSurface } from "@/components/layout/TopoProseSurface";
import { TopoSectionProvider } from "@/components/layout/TopoSectionContext";
import { SITE_TOPO_PATTERN } from "@/content/topo-patterns";
import { cn } from "@/lib/utils";

export type PageRiftHeaderVariant =
  | "program"
  | "lineup"
  | "partners"
  | "pitch"
  | "exhibit"
  | "sponsor"
  | "tickets"
  | "minimal";

type Props = {
  variant: PageRiftHeaderVariant;
  profilePath?: string;
  eyebrow?: string;
  title: ReactNode;
  description?: ReactNode;
  children?: ReactNode;
  className?: string;
};

export function PageRiftHeader({
  variant,
  profilePath,
  eyebrow,
  title,
  description,
  children,
  className,
}: Props) {
  void variant;
  void profilePath;

  return (
    <header
      className={cn(
        "section-white group/topo-section relative isolate min-h-[220px] overflow-x-hidden border-b border-[#1a5c38]/10 bg-white pt-24 pb-10 md:min-h-[260px] md:pb-12",
        className
      )}
    >
      <TopographicPattern pattern={SITE_TOPO_PATTERN} tone="light" />
      <TopoCurvyExtend />
      <TopoSectionProvider tone="light">
        <div className="topo-content-layer topo-content-readable relative z-10 mx-auto max-w-6xl px-4 pt-4 md:px-6">
          <TopoProseSurface className="max-w-3xl">
            {eyebrow && (
              <p className="text-xs font-semibold uppercase tracking-widest text-[#ffb300]">
                {eyebrow}
              </p>
            )}
            <div className="mt-3">{title}</div>
            {description && (
              <div className="mt-4 text-muted-foreground leading-relaxed">{description}</div>
            )}
          </TopoProseSurface>
          {children && <div className="relative z-[15] mt-8">{children}</div>}
        </div>
      </TopoSectionProvider>
    </header>
  );
}