'use client';
import React, { ElementType } from 'react';
import { cva } from 'class-variance-authority';
import { Slot } from '@radix-ui/react-slot';
import { cn } from '@/lib/utils.client';

type Variant =
  | 'h1'
  | 'h2'
  | 'h3'
  | 'h4'
  | 'h5'
  | 'h6'
  | 's1'
  | 's2'
  | 's3'
  | 's4'
  | 's5'
  | 's6'
  | 'b1'
  | 'b2'
  | 'b3'
  | 'b4'
  | 'b5'
  | 'small';

const typographyVariants = cva('text-ellipsis', {
  variants: {
    variant: {
      h1: 'text-4xl sm:text-5xl md:text-6xl font-bold leading-tight',
      h2: 'text-3xl sm:text-4xl md:text-5xl font-bold leading-tight',
      h3: 'text-2xl sm:text-3xl md:text-4xl font-semibold leading-tight',
      h4: 'text-xl sm:text-2xl md:text-3xl font-semibold leading-snug',
      h5: 'text-lg sm:text-xl md:text-2xl font-semibold leading-snug',
      h6: 'text-base sm:text-lg md:text-xl font-semibold leading-normal',
      s1: 'text-lg sm:text-xl md:text-2xl font-medium leading-normal',
      s2: 'text-base sm:text-lg md:text-xl font-medium leading-normal',
      s3: 'text-sm sm:text-base md:text-lg font-medium leading-normal',
      s4: 'text-sm sm:text-base md:text-lg font-medium leading-normal',
      s5: 'text-xs sm:text-sm md:text-base font-medium leading-normal',
      s6: 'text-xs sm:text-sm md:text-base font-medium leading-normal',
      b1: 'text-base sm:text-lg md:text-xl font-normal leading-relaxed',
      b2: 'text-base sm:text-lg md:text-xl font-normal leading-normal',
      b3: 'text-sm sm:text-base md:text-lg font-normal leading-normal',
      b4: 'text-xs sm:text-sm md:text-base font-normal leading-normal',
      b5: 'text-xs sm:text-sm md:text-base font-normal leading-tight',
      small: 'text-xs sm:text-xs md:text-sm font-normal leading-tight',
    },
  },
  defaultVariants: { variant: 'b3' },
});

const tags: Record<Variant, ElementType> = {
  h1: 'h1',
  h2: 'h2',
  h3: 'h3',
  h4: 'h4',
  h5: 'h5',
  h6: 'h6',
  s1: 'h2',
  s2: 'h3',
  s3: 'h4',
  s4: 'h5',
  s5: 'h6',
  s6: 'h6',
  b1: 'p',
  b2: 'p',
  b3: 'p',
  b4: 'p',
  b5: 'p',
  small: 'span',
};

interface TypographyProps extends React.HTMLAttributes<HTMLElement> {
  variant: Variant;
  children: React.ReactNode;
  className?: string;
  asChild?: boolean;
}

export const Typography = React.forwardRef<HTMLElement, TypographyProps>(
  ({ variant, children, className, asChild = false }, ref) => {
    const Comp = asChild ? Slot : tags[variant];
    return (
      <Comp className={cn(typographyVariants({ variant, className }))} ref={ref}>
        {children}
      </Comp>
    );
  }
);

Typography.displayName = 'Typography';