import styled from "styled-components/native";
import { CSSObject } from "styled-components";
import { colors } from "data/dataMx";
import RenderHtml from "react-native-render-html";
import { Platform } from "react-native";

export interface IStylesProps {
  align: string;
  color: colors;
  font: string;
  styles?: CSSObject;
  fontWeight: number;
}

export const BodyXLarge = styled.Text`
  ${({ styles }) => styles};
  font-family: ${({ font }: IStylesProps) => font};
  font-style: normal;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0px;
  text-align: ${({ align }: IStylesProps) => align};
  color: ${({ color }: IStylesProps) => color};
  ${
    ({ fontWeight }: IStylesProps) => {
      if (Platform.OS == 'ios') {
        return { fontWeight }
      }
    }
  }
`;

export const BodyLarge = styled.Text`
  ${({ styles }) => styles};
  font-family: ${({ font }: IStylesProps) => font};
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  text-align: ${({ align }: IStylesProps) => align};
  color: ${({ color }: IStylesProps) => color};
  ${
    ({ fontWeight }: IStylesProps) => {
      if (Platform.OS == 'ios') {
        return { fontWeight }
      }
    }
  }
`;

export const BodyMedium = styled.Text`
  ${({ styles }) => styles};
  font-family: ${({ font }: IStylesProps) => font};
  font-style: normal;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: ${({ align }: IStylesProps) => align};
  color: ${({ color }: IStylesProps) => color};
  ${
    ({ fontWeight }: IStylesProps) => {
      if (Platform.OS == 'ios') {
        return { fontWeight }
      }
    }
  }
`;

export const BodySmall = styled.Text`
  ${({ styles }) => styles};
  font-family: ${({ font }: IStylesProps) => font};
  font-style: normal;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0px;
  text-align: ${({ align }: IStylesProps) => align};
  color: ${({ color }: IStylesProps) => color};
  ${
    ({ fontWeight }: IStylesProps) => {
      if (Platform.OS == 'ios') {
        return { fontWeight }
      }
    }
  }
`;

export const BodyXSmall = styled.Text`
  ${({ styles }) => styles};
  font-family: ${({ font }: IStylesProps) => font};
  font-style: normal;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.2px;
  text-align: ${({ align }: IStylesProps) => align};
  color: ${({ color }: IStylesProps) => color};
  ${
    ({ fontWeight }: IStylesProps) => {
      if (Platform.OS == 'ios') {
        return { fontWeight }
      }
    }
  }
`;

export const HtmlContent = styled(RenderHtml)``;
