import React, { ElementType, HTMLAttributes, ReactNode } from 'react';
import { cva, VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';
const textVariants = cva('dark:text-gray-300', {
  variants: {
    variant: {
      div: 'block text-base',
      span: 'inline text-sm',
      b: 'inline font-bold',
    },
    size: {
      sm: 'text-sm',
      md: 'text-base',
      lg: 'text-lg',
      xl: 'text-xl',
    },
    weight: {
      normal: 'font-normal',
      semibold: 'font-semibold',
      bold: 'font-bold',
    },
    color: {
      default: 'text-gray-700',
      primary: 'text-blue-600 dark:text-blue-400',
      secondary: 'text-gray-500 dark:text-gray-400',
      success: 'text-green-600 dark:text-green-400',
      warning: 'text-yellow-600 dark:text-yellow-400',
      danger: 'text-red-600 dark:text-red-400',
      white: 'text-white',
    },
  },
  defaultVariants: {
    variant: 'div',
    size: 'md',
    weight: 'normal',
    color: 'default',
  },
});
// Manually declare the variant keys — the keys you put in your cva 'variant' object
type VariantKey = 'div' | 'span' | 'b';
interface TextProps
  extends
    Omit<
      HTMLAttributes<HTMLDivElement | HTMLSpanElement | HTMLBRElement>,
      'color' | 'variant'
    >,
    VariantProps<typeof textVariants> {
  variant?: VariantKey;
  children: ReactNode;
}
export function Text({
  variant = 'div',
  size,
  weight,
  color,
  className,
  children,
  ...props
}: TextProps) {
  const Tag: ElementType = variant;
  return (
    <Tag
      className={cn(textVariants({ variant, size, weight, color }), className)}
      {...props}
    >
      {children}
    </Tag>
  );
}