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

const captionTypes = {
  xlarge: {
    sizeValue: "16px",
    letterSpacing: "0.5px",
    lineHeight: "20px",
  },
  large: {
    sizeValue: "14px",
    letterSpacing: "0.5px",
    lineHeight: "18px",
  },
  medium: {
    sizeValue: "12px",
    letterSpacing: "0.5px",
    lineHeight: "15px",
  },
  small: {
    sizeValue: "10px",
    letterSpacing: "0.5px",
    lineHeight: "13px",
  },
  xsmall: {
    sizeValue: "8px",
    letterSpacing: "0.5px",
    lineHeight: "10px",
  },
};

export const AtomCaption = ({
  size,
  text,
  weight = "bold",
  color,
  align = "left",
  styles = {},
  isHTML = false,
}: ITypographyProps) => {
  const { fontFamily } = useContext(ThemeContext);
  return (
    <CaptionStyle
      align={align}
      color={color ? theme[color] : theme.neutral700}
      size={captionTypes[size].sizeValue}
      letterSpacing={captionTypes[size].letterSpacing}
      lineHeight={captionTypes[size].lineHeight}
      font={fontFamily.main[weight]}
      fontWeight={fontFamily.weight[fontFamily.main[weight]]}
      styles={styles}
    >
      {isHTML ? (
        <HtmlContent
          baseStyle={{ fontSize: captionTypes[size].sizeValue }}
          source={{ html: text }}
        />
      ) : (
        text
      )}
    </CaptionStyle>
  );
};
