import { Reveal } from "@/components/motion/Reveal";
import { SplitText } from "@/components/motion/SplitText";
import { cn } from "@/lib/utils";
import type { ElementType, ReactNode } from "react";

export function SectionHeading({
  eyebrow,
  title,
  lede,
  as = "h2",
  align = "left",
  className,
  children,
}: {
  eyebrow?: string;
  title: string;
  lede?: string;
  as?: ElementType;
  align?: "left" | "center";
  className?: string;
  children?: ReactNode;
}) {
  return (
    <div
      className={cn(
        "max-w-3xl",
        align === "center" && "mx-auto text-center",
        className,
      )}
    >
      {eyebrow ? (
        <Reveal direction="none" duration={0.6}>
          <p className="eyebrow flex items-center gap-3">
            {align === "center" ? null : (
              <span className="h-px w-8 bg-[var(--thread)]" />
            )}
            {eyebrow}
          </p>
        </Reveal>
      ) : null}

      <SplitText
        text={title}
        as={as}
        className="display-md mt-5 text-balance text-[var(--cotton)]"
      />

      {lede ? (
        <Reveal delay={0.15}>
          <p className="lede mt-6 text-pretty">{lede}</p>
        </Reveal>
      ) : null}

      {children}
    </div>
  );
}