import type { ReactNode } from "react";
import { cn } from "@/lib/cn";
import { revealProps } from "@/components/ui/reveal";

interface EyebrowProps {
  children: ReactNode;
  tone?: "light" | "dark";
  className?: string;
}

/** Short label with a leading hairline, e.g. "— Contact". Used in page heroes and the closing CTA. */
export function Eyebrow({ children, tone = "light", className }: EyebrowProps) {
  return (
    <p
      className={cn(
        "flex items-center gap-3 text-label uppercase",
        tone === "dark" ? "text-night-muted" : "text-muted",
        className,
      )}
    >
      <span aria-hidden="true" className="h-px w-6 bg-current opacity-60" />
      <span>{children}</span>
    </p>
  );
}

interface SectionHeadingProps {
  id: string;
  title: ReactNode;
  intro?: ReactNode;
  layout?: "split" | "stack";
  tone?: "light" | "dark";
  size?: "lg" | "md";
  as?: "h1" | "h2";
  className?: string;
  children?: ReactNode;
}

export function SectionHeading({
  id,
  title,
  intro,
  layout = "split",
  tone = "light",
  size = "lg",
  as: Heading = "h2",
  className,
  children,
}: SectionHeadingProps) {
  const introColor = tone === "dark" ? "text-night-muted" : "text-ink-soft";
  const titleClass = size === "lg" ? "text-display-lg" : "text-display-md";

  if (layout === "stack") {
    return (
      <header className={cn("max-w-4xl", className)} {...revealProps()}>
        <Heading id={id} className={titleClass}>
          {title}
        </Heading>
        {intro ? <div className={cn("mt-6 text-lead measure-lead", introColor)}>{intro}</div> : null}
        {children}
      </header>
    );
  }

  return (
    <header className={cn("grid gap-6 lg:grid-cols-12 lg:gap-x-6", className)} {...revealProps()}>
      <div className="lg:col-span-7">
        <Heading id={id} className={titleClass}>
          {title}
        </Heading>
      </div>
      {intro || children ? (
        <div className={cn("lg:col-span-5 lg:self-end", introColor)}>
          {intro ? <div className="text-lead">{intro}</div> : null}
          {children}
        </div>
      ) : null}
    </header>
  );
}