import { cn } from "@/lib/utils";

export interface SectionHeadingProps {
  eyebrow?: string;
  title: string;
  description?: string;
  align?: "left" | "center";
  id?: string;
}

/** Shared heading block reused across every homepage section — keeps eyebrow/title/description rhythm consistent. */
export function SectionHeading({ eyebrow, title, description, align = "left", id }: SectionHeadingProps) {
  return (
    <div className={cn("max-w-2xl", align === "center" && "mx-auto text-center")}>
      {eyebrow && (
        <p className="mb-3 font-mono text-[11px] uppercase tracking-wider text-primary">{eyebrow}</p>
      )}
      <h2 id={id} className="text-balance font-display text-h1 font-normal text-ink">
        {title}
      </h2>
      {description && <p className="mt-4 text-body-md text-ink-soft">{description}</p>}
    </div>
  );
}