import { productThemes } from "@/components/products/product-theme";
import type { ProductTone } from "@/data/products.data";

export default function ProductSectionHeading({
  centered = false,
  description,
  eyebrow,
  tone,
  title,
}: {
  centered?: boolean;
  description?: string;
  eyebrow: string;
  tone: ProductTone;
  title: string;
}) {
  const theme = productThemes[tone];

  return (
    <div className={centered ? "mx-auto max-w-2xl text-center" : "max-w-2xl"}>
      <p className={`text-[11px] font-extrabold uppercase tracking-[0.2em] ${theme.accentText}`}>{eyebrow}</p>
      <h2 className="mt-3 text-3xl font-extrabold tracking-[-0.055em] text-[#111a42] sm:text-4xl">{title}</h2>
      {description ? <p className="mt-4 text-[14px] leading-7 text-[#6d7892]">{description}</p> : null}
    </div>
  );
}