import { Heading } from "@/components/ui/heading";

export default function Example() {
  return <Heading />;
}

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const levels = {
  1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl",
  2: "scroll-m-20 text-3xl font-semibold tracking-tight",
  3: "scroll-m-20 text-2xl font-semibold tracking-tight",
  4: "scroll-m-20 text-xl font-semibold tracking-tight",
  5: "scroll-m-20 text-lg font-semibold tracking-tight",
  6: "scroll-m-20 text-base font-semibold tracking-tight",
};

const Heading = forwardRef(({ className, level = 1, as, ...props }, ref) => {
  const Tag = as || `h${level}`;
  return <Tag ref={ref} className={cn(levels[level], className)} {...props} />;
});
Heading.displayName = "Heading";

export { Heading };