import { type ReactNode } from "react";

type SectionHeadingProps = {
  eyebrow?: string;
  title: ReactNode;
  body?: ReactNode;
  dark?: boolean;
  className?: string;
};

/** Shared section header: optional eyebrow pill, display title, optional body. */
export default function SectionHeading({
  eyebrow,
  title,
  body,
  dark = false,
  className = "",
}: SectionHeadingProps) {
  return (
    <div className={`section-head ${className}`}>
      {eyebrow ? (
        <p
          className={`eyebrow ${dark ? "eyebrow-dark" : ""}`}
        >
          {eyebrow}
        </p>
      ) : null}
      <h2
        className={`mt-5 max-w-2xl font-display text-3xl font-bold leading-[1.08] tracking-tight sm:text-4xl lg:text-5xl ${
          dark ? "text-white" : "text-ink"
        }`}
      >
        {title}
      </h2>
      {body ? (
        <p
          className={`mt-5 max-w-xl text-base leading-relaxed sm:text-lg ${
            dark ? "text-white/65" : "text-ink-soft"
          }`}
        >
          {body}
        </p>
      ) : null}
    </div>
  );
}