import { splitEmphasis } from "@/lib/emphasize";

interface SectionHeadingProps {
  eyebrow?: string;
  title: string;
  titleAccent?: string;
  subtitle?: string;
  align?: "start" | "center";
  light?: boolean;
  className?: string;
}

export function SectionHeading({
  eyebrow,
  title,
  titleAccent,
  subtitle,
  align = "center",
  light = false,
  className = "",
}: SectionHeadingProps) {
  const alignClass =
    align === "center" ? "text-center mx-auto items-center" : "text-start items-start";
  const { before, accent, after } = splitEmphasis(title, titleAccent ?? "");

  return (
    <div className={`flex max-w-2xl flex-col gap-4 ${alignClass} ${className}`}>
      {eyebrow ? (
        <span
          className={`text-xs font-bold uppercase tracking-[0.2em] ${
            light ? "text-gold-300" : "text-bronze-600"
          }`}
        >
          {eyebrow}
        </span>
      ) : null}
      <h2
        className={`text-3xl font-medium leading-tight sm:text-4xl md:text-5xl ${
          light ? "text-white" : "text-charcoal-950"
        }`}
      >
        {before}
        {accent ? <span className="font-extrabold">{accent}</span> : null}
        {after}
      </h2>
      {subtitle ? (
        <p className={`text-base sm:text-lg ${light ? "text-white/70" : "text-charcoal-400"}`}>
          {subtitle}
        </p>
      ) : null}
    </div>
  );
}