"use client";

import { Reveal } from "./reveal";

export function SectionHeading({
  eyebrow,
  title,
  description,
  align = "center",
  dark = false,
}: {
  eyebrow: string;
  title: string;
  description?: string;
  align?: "center" | "left";
  dark?: boolean;
}) {
  return (
    <Reveal
      className={`max-w-2xl ${align === "center" ? "mx-auto text-center" : ""}`}
    >
      <span className="inline-flex items-center gap-2.5 text-xs font-semibold uppercase tracking-[0.2em] text-primary">
        <span className={`h-px w-6 bg-primary ${align === "center" ? "" : ""}`} />
        {eyebrow}
      </span>
      <h2
        className={`mt-4 text-3xl font-extrabold tracking-tight text-foreground sm:text-4xl md:leading-[1.12] ${
          dark ? "text-white" : ""
        }`}
      >
        {title}
      </h2>
      {description && (
        <p
          className={`mt-4 text-base leading-relaxed text-muted-foreground sm:text-lg ${
            dark ? "text-stone-300" : ""
          }`}
        >
          {description}
        </p>
      )}
    </Reveal>
  );
}