import type { ReactNode } from "react";

type Props = {
  /** Small uppercase kicker above the title. */
  eyebrow?: string;
  title: ReactNode;
  /** Supporting paragraph under the title. */
  lead?: ReactNode;
  /** Optional link/button aligned to the right on wide screens. */
  action?: ReactNode;
  align?: "left" | "center";
  /** `page` for h1-sized headings, `section` for h2. */
  level?: "page" | "section";
  className?: string;
};

/**
 * The heading pattern used at the top of every section: eyebrow, title, lead.
 * Sizes are deliberately smaller on mobile — the previous 6xl/7xl display
 * type overflowed narrow screens.
 */
export function SectionHeading({
  eyebrow,
  title,
  lead,
  action,
  align = "left",
  level = "section",
  className = "",
}: Props) {
  const Tag = level === "page" ? "h1" : "h2";
  const size =
    level === "page"
      ? "text-4xl sm:text-6xl lg:text-7xl"
      : "text-3xl sm:text-4xl lg:text-5xl";
  const centered = align === "center";

  return (
    <div
      className={`flex flex-col gap-6 ${
        action ? "lg:flex-row lg:items-end lg:justify-between" : ""
      } ${centered ? "items-center text-center" : ""} ${className}`}
    >
      <div className={centered ? "max-w-2xl" : ""}>
        {eyebrow && (
          <p className="font-display text-xs sm:text-sm tracking-[0.3em] text-accent mb-4">
            {eyebrow}
          </p>
        )}
        <Tag
          className={`font-display ${size} tracking-wider leading-[1.05] text-balance`}
        >
          {title}
        </Tag>
        {lead && (
          <p
            className={`mt-6 text-base sm:text-lg text-foreground-muted leading-relaxed max-w-2xl ${
              centered ? "mx-auto" : ""
            }`}
          >
            {lead}
          </p>
        )}
      </div>
      {action && <div className="shrink-0">{action}</div>}
    </div>
  );
}