import React, { useContext } from 'react';
import { flexAlign } from 'native/atoms/Typography/helpers';
import { ITypographyProps } from 'native/atoms/Typography/TypographyProps';
import { ThemeContext } from 'context/context';
import { theme } from 'data/dataMx';
import { Title, HtmlContent } from './styles';

const overlineType = {
  xlarge: {
    sizeValue: '10px',
    letterSpacing: '1.5px',
    lineHeight: '13px',
  },
  large: {
    sizeValue: '10px',
    letterSpacing: '1.5px',
    lineHeight: '13px',
  },
  medium: {
    sizeValue: '10px',
    letterSpacing: '1.5px',
    lineHeight: '13px',
  },
  small: {
    sizeValue: '10px',
    letterSpacing: '1.5px',
    lineHeight: '13px',
  },
  xsmall: {
    sizeValue: '10px',
    letterSpacing: '1.5px',
    lineHeight: '13px',
  },
}

export const AtomOverline = ({ text, align = 'center', color, weight = 'bold', styles = {}, isHTML = false }: ITypographyProps) => {
  const { fontFamily } = useContext(ThemeContext);
  return (
    <Title
      align={flexAlign[align].value}
      color={color ? theme[color] : theme.neutral700}
      font={fontFamily.main[weight]}
      letterSpacing={overlineType['large'].letterSpacing}
      lineHeight={overlineType['large'].lineHeight}
      size={overlineType['large'].sizeValue}
      styles={styles}
    >
      {
        isHTML ?
          <HtmlContent baseStyle={{ fontSize: overlineType['large'].sizeValue}} source={{ html: text }} />
        : text
      }
    </Title>
  )
}
