import { FC } from 'react';
import { twx } from '../lib/utils';

const sizeVariants = {
  xs: 'text-xs',
  sm: 'text-sm',
  md: 'text-base',
  lg: 'text-lg',
  xl: 'text-xl',
  '2xl': 'text-2xl',
  '3xl': 'text-3xl',
  '4xl': 'text-4xl',
  '5xl': 'text-5xl',
};

const opacityVariants = {
  '90': 'opacity-90',
  '60': 'opacity-60',
  '40': 'opacity-40',
  '25': 'opacity-25',
};

type TextProps = {
  opacity?: '90' | '60' | '40' | '25';
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
  bold?: boolean;
  children: React.ReactNode;
  className?: string;
} & React.HTMLAttributes<HTMLSpanElement>;

export const Text: FC<TextProps> = ({
  children,
  className,
  size = 'md',
  opacity = '90',
  bold = false,
  ...props
}) => {
  return (
    <span
      className={twx(
        'text-2xl',
        bold && 'font-bold',
        sizeVariants[size],
        opacityVariants[opacity],
        className,
      )}
      {...props}
    >
      {children}
    </span>
  );
};
