import type { ReactNode } from "react";
import { cn } from "../../lib/cn";

export function Heading({
  as: Component = "h2",
  children,
  className,
}: {
  as?: "h1" | "h2" | "h3" | "h4";
  children: ReactNode;
  className?: string;
}) {
  return (
    <Component
      className={cn(
        "m-0 tracking-[-0.04em] text-[var(--uhuru-text-primary)]",
        Component === "h1" ? "text-5xl" : Component === "h2" ? "text-4xl" : Component === "h3" ? "text-2xl" : "text-xl",
        className,
      )}
      style={{ fontFamily: "var(--uhuru-font-heading)" }}
    >
      {children}
    </Component>
  );
}