type SectionHeadingProps = {
  eyebrow: string;
  title: string;
  description?: string;
  align?: "left" | "center";
};

export function SectionHeading({
  eyebrow,
  title,
  description,
  align = "left",
}: SectionHeadingProps) {
  const alignment =
    align === "center"
      ? "section-heading-stack mx-auto max-w-3xl text-center"
      : "section-heading-stack max-w-3xl";

  return (
    <div className={alignment}>
      <p className="section-kicker">{eyebrow}</p>
      <h2 className="type-section-title text-[var(--color-ink)]">
        {title}
      </h2>
      {description ? (
        <p className="type-body-responsive text-[var(--color-muted)]">{description}</p>
      ) : null}
    </div>
  );
}