import { cva, VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';
import { HTMLAttributes, ReactNode } from 'react';
const headingVariants = cva('text-gray-900 dark:text-white font-bold', {
  variants: {
    level: {
      h1: 'text-4xl md:text-5xl font-extrabold',
      h2: 'text-3xl md:text-4xl font-bold',
      h3: 'text-2xl md:text-3xl font-semibold',
      h4: 'text-xl md:text-2xl font-semibold',
      h5: 'text-lg md:text-xl font-semibold',
      h6: 'text-base md:text-lg font-semibold',
    },
  },
  defaultVariants: {
    level: 'h1',
  },
});
// Only allow real heading tags
type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
interface HeadingProps
  extends
    HTMLAttributes<HTMLHeadingElement>,
    VariantProps<typeof headingVariants> {
  children: ReactNode;
  level?: HeadingLevel;
}
export function Heading({
  className,
  level = 'h1',
  children,
  ...props
}: HeadingProps) {
  const Tag = level as HeadingLevel;
  return (
    <Tag className={cn(headingVariants({ level }), className)} {...props}>
      {children}
    </Tag>
  );
}