import type { ReactNode } from "react";

/** Eyebrow + heading + optional lead paragraph, used to open most sections. */
export function SectionHeading({
  eyebrow,
  title,
  lead,
  align = "left",
  tone = "dark",
}: {
  eyebrow: string;
  title: ReactNode;
  lead?: string;
  align?: "left" | "center";
  tone?: "dark" | "light";
}) {
  return (
    <div
      className={`max-w-2xl ${align === "center" ? "mx-auto text-center [&_.eyebrow]:flex-row [&_.eyebrow]:items-center" : ""} ${
        tone === "light" ? "[&_.eyebrow]:text-amber" : ""
      }`}
    >
      <span className="eyebrow">{eyebrow}</span>
      <h2 className={`display-2 mt-4 ${tone === "light" ? "text-white" : ""}`}>
        {title}
      </h2>
      {lead ? (
        <p className={`mt-4 ${tone === "light" ? "text-white/75" : "lead"}`}>
          {lead}
        </p>
      ) : null}
    </div>
  );
}

/** Consistent vertical rhythm + container for page sections. */
export function Section({
  children,
  className = "",
  id,
  tone = "mint",
}: {
  children: ReactNode;
  className?: string;
  id?: string;
  tone?: "mint" | "white" | "teal";
}) {
  const tones = {
    mint: "bg-mint text-ink",
    white: "bg-white text-ink",
    teal: "bg-teal-deep text-white",
  } as const;
  return (
    <section id={id} className={`${tones[tone]} py-20 md:py-28 ${className}`}>
      <div className="mx-auto w-full max-w-6xl px-6 lg:px-10">{children}</div>
    </section>
  );
}