import { cn } from './utils';
import type { VariantProps } from 'class-variance-authority';
import { cva } from 'class-variance-authority';
import type { HTMLAttributes, PropsWithChildren } from 'react';
import { forwardRef } from 'react';

const variants = cva('font-bold leading-7 text-gray-900 sm:truncate sm:tracking-tight', {
  defaultVariants: {
    size: 1,
  },
  variants: {
    size: {
      1: 'text-lg sm:text-xl',
      2: 'text-xl sm:text-2xl',
      3: 'text-2xl sm:text-3xl',
      4: 'text-3xl sm:text-4xl',
      5: 'text-4xl sm:text-5xl',
      6: 'text-5xl sm:text-6xl',
      7: 'text-6xl sm:text-7xl',
      8: 'text-7xl sm:text-8xl',
      9: 'text-8xl sm:text-9xl',
    },
  },
});

export type HeadingProps = HTMLAttributes<HTMLHeadingElement> &
  VariantProps<typeof variants> &
  PropsWithChildren;

export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
  ({ children, className, size, ...props }, ref) => (
    <h1 className={cn(variants({ className, size }))} ref={ref} {...props}>
      {children}
    </h1>
  )
);