import React from 'react';

const typographyColor = {
  PRIMARY: 'primary',
  SECONDARY: 'secondary',
  SUCCESS: 'success',
  DANGER: 'danger',
  WARNING: 'warning',
  INFO: 'info',
  LIGHT: 'light',
  DARK: 'dark',
  BODY: 'body',
  MUTED: 'muted',
  WHITE: 'white',
  BLACK_50: 'black-50',
  WHITE_50: 'white-50',
};


const typographyBg = {
  PRIMARY: 'primary',
  SECONDARY: 'secondary',
  SUCCESS: 'success',
  DANGER: 'danger',
  WARNING: 'warning',
  INFO: 'info',
  LIGHT: 'light',
  DARK: 'dark',
  BODY: 'body',
  WHITE: 'white',
};

const typographyAlign = {
  START: 'start',
  CENTER: 'center',
  END: 'end',
};

const typographyTransform = {
  LOWERCASE: 'lowercase',
  UPPERCASE: 'uppercase',
  CAPITALIZE: 'capitalize',
};

const typographySize = {
  FS_1: '1',
  FS_2: '2',
  FS_3: '3',
  FS_4: '4',
  FS_5: '5',
  FS_6: '6',
};

interface TypographyProps {
  className?: string;
  color?: keyof typeof typographyColor;
  emphasis?: boolean
  bg?: keyof typeof typographyBg;
  align?: keyof typeof typographyAlign;
  transform?: keyof typeof typographyTransform;
  size?: keyof typeof typographySize;
  ellipsis?: boolean;
}

const Typography = ({
  className,
  bg,
  color,
  emphasis,
  align,
  transform,
  size,
  ellipsis,
  ...props
}: TypographyProps) => {
  const bgClassName = bg ? `text-bg-${bg}` : '';
  const colorClassName = color ? `text-${color}` : '';
  const alignClassName = align ? `text-${align}` : '';
  const transformClassName = transform ? `text-${transform}` : '';
  const sizeClassName = size ? `fs-${size}` : '';
  const ellipsisClassName = ellipsis ? 'text-truncate' : '';
  return (
    <p
      className={`
        ${bgClassName} 
        ${colorClassName}${emphasis ? "-emphasis" : ""} 
        ${alignClassName} 
        ${transformClassName} 
        ${sizeClassName} 
        ${ellipsisClassName}
        ${className}
      `}
      {...props}
    />
  );
};

export default Typography;
export { Typography, typographyColor, typographyBg, typographyAlign, typographyTransform, typographySize };