import React, { useContext } from "react";
import {
  HeadlineXLarge,
  HeadlineLarge,
  HeadlineMedium,
  HeadlineSmall,
  HeadlineXSmall,
} from "./styles";
import { ISetup, IFontWeight } from "interfaces";
import { ITypographyProps } from "../TypographyProps";
import { theme } from "data/dataMx";
import { ThemeContext } from "context/context";
import parse from "html-react-parser";

export const AtomHeadline = ({
  align = "center",
  size,
  text,
  color,
  weight = "thin",
  styles = {},
}: ITypographyProps) => {
  const { fontFamily } = useContext<ISetup>(ThemeContext);
  const font: string = fontFamily.main[weight as keyof IFontWeight];

  switch (size) {
    case "xlarge":
      return (
        <HeadlineXLarge
          color={color ? theme[color] : theme.neutral700}
          font={font}
          align={align}
          styles={styles}
        >
          {parse(text)}
        </HeadlineXLarge>
      );
    case "large":
      return (
        <HeadlineLarge
          color={color ? theme[color] : theme.neutral700}
          font={font}
          align={align}
          styles={styles}
        >
          {parse(text)}
        </HeadlineLarge>
      );
    case "medium":
      return (
        <HeadlineMedium
          color={color ? theme[color] : theme.neutral700}
          font={font}
          align={align}
          styles={styles}
        >
          {parse(text)}
        </HeadlineMedium>
      );
    case "small":
      return (
        <HeadlineSmall
          color={color ? theme[color] : theme.neutral700}
          font={font}
          align={align}
          styles={styles}
        >
          {parse(text)}
        </HeadlineSmall>
      );
    case "xsmall":
      return (
        <HeadlineXSmall
          color={color ? theme[color] : theme.neutral700}
          font={font}
          align={align}
          styles={styles}
        >
          {parse(text)}
        </HeadlineXSmall>
      );
  }
};
