import type { ReactNode } from "react"
import { cn } from "@/lib/utils"
import { LandingReveal } from "@/components/landing/landing-reveal"

export function ProductSectionHeading({
  eyebrow,
  title,
  description,
  accent,
}: {
  eyebrow: string
  title: ReactNode
  description?: string
  accent?: string
}) {
  return (
    <LandingReveal className="mx-auto flex max-w-2xl flex-col items-center gap-4 text-center">
      <span
        className={cn(
          "rounded-full px-3.5 py-1 text-xs font-semibold uppercase tracking-wider",
          !accent && "bg-[var(--landing-chip)] text-[var(--landing-chip-fg)]"
        )}
        style={
          accent
            ? {
                backgroundColor: `${accent}1a`,
                color: accent,
              }
            : undefined
        }
      >
        {eyebrow}
      </span>
      <h2 className="text-balance text-3xl font-bold tracking-tight sm:text-4xl">
        {title}
      </h2>
      {description ? (
        <p className="text-balance text-base leading-relaxed text-[var(--landing-muted)]">
          {description}
        </p>
      ) : null}
    </LandingReveal>
  )
}