import type { ReactNode } from "react";
import { cn } from "@/lib/utils";

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

export function SectionHeading({
  eyebrow,
  title,
  description,
  align = "left",
  className,
}: SectionHeadingProps) {
  return (
    <div
      className={cn(
        "max-w-3xl",
        align === "center" && "mx-auto text-center",
        className,
      )}
    >
      {eyebrow ? (
        <div
          className={cn(
            "mb-3 flex items-center gap-3",
            align === "center" && "justify-center",
          )}
        >
          <span className="h-1 w-9 rounded-full bg-primary" />
          <p className="text-sm font-extrabold uppercase tracking-[0.08em] text-navy-deep">
            {eyebrow}
          </p>
        </div>
      ) : null}
      <h2 className="text-3xl font-bold tracking-normal text-navy-deep sm:text-4xl">
        {title}
      </h2>
      {description ? (
        <p className="mt-4 text-base leading-7 text-navy-muted">{description}</p>
      ) : null}
    </div>
  );
}