import { cn } from "@/lib/utils";
import { Reveal } from "@/components/motion/Reveal";

interface SectionHeadingProps {
  eyebrow?: string;
  title: string;
  subtitle?: string;
  align?: "center" | "left";
  className?: string;
  as?: "h1" | "h2" | "h3";
}

export function SectionHeading({
  eyebrow,
  title,
  subtitle,
  align = "center",
  className,
  as: Tag = "h2",
}: SectionHeadingProps) {
  return (
    <div
      className={cn(
        "max-w-3xl",
        align === "center" && "mx-auto text-center",
        className,
      )}
    >
      {eyebrow && (
        <Reveal>
          <span className="eyebrow">
            <span className="h-1.5 w-1.5 rounded-full bg-brand-500" aria-hidden />
            {eyebrow}
          </span>
        </Reveal>
      )}
      <Reveal delay={0.06} className="mt-4">
        <Tag className="text-balance text-display-md tracking-tight text-slate-900 dark:text-white sm:text-display-lg">
          {title}
        </Tag>
      </Reveal>
      {subtitle && (
        <Reveal delay={0.12} className="mt-5">
          <p className="text-balance text-base leading-[1.7] text-slate-600 dark:text-slate-300 sm:text-lg">
            {subtitle}
          </p>
        </Reveal>
      )}
    </div>
  );
}