import cc from 'classcat';

interface TextProps extends React.HTMLAttributes<HTMLElement> {
  size?: 'xl' | 'l' | 'm' | 's' | 'xs';
  align?: 'center' | 'justify' | 'left' | 'right';
  weight?: 'bold' | 'normal' | 'medium';
  italic?: boolean;
  overflow?: boolean;
  truncate?: boolean;
  inline?: boolean;
  className?: string;
  children: React.ReactNode;
}

export const Text = ({
  size = 'm',
  align,
  weight,
  italic,
  overflow,
  truncate,
  inline,
  children,
  className,
  ...props
}: TextProps) => {
  const cn = cc([
    {
      tac: align === 'center',
      taj: align === 'justify',
      tal: align === 'left',
      tar: align === 'right',

      fz24: size === 'xl',
      fz20: size === 'l',
      fz16: size === 'm',
      fz14: size === 's',
      fz12: size === 'xs',

      bold: weight === 'bold',
      normal: weight === 'normal',
      medium: weight === 'medium',

      italic: italic === true,
      nowrap: overflow === false,
      truncate: truncate === true,
    },
    'margin0',
    className,
  ]);

  const Element = inline ? 'span' : 'p';
  return (
    <Element className={cn} {...props}>
      {children}
    </Element>
  );
};

export default Text;