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

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

export const DisplayXLarge = styled.Text`
  ${({ styles }) => styles};
  font-family: ${({ font }: IStylesProps) => font};
  font-weight: ${({ fontWeight }: IStylesProps) => fontWeight };
  font-size: 48px;
  line-height: 50px;
  letter-spacing: 0.24px;
  display: flex;
  justify-content: ${({ align }: IStylesProps) => align};
  color: ${({ color }: IStylesProps) => color};
`;

export const DisplayLarge = styled.Text`
  ${({ styles }) => styles};
  font-family: ${({ font }: IStylesProps) => font};
  font-weight: ${({ fontWeight }: IStylesProps) => fontWeight };
  font-size: 46px;
  line-height: 48px;
  letter-spacing: 0.23px;
  display: flex;
  justify-content: ${({ align }: IStylesProps) => align};
  color: ${({ color }: IStylesProps) => color};
`;

export const DisplayMedium = styled.Text`
  ${({ styles }) => styles};
  font-family: ${({ font }: IStylesProps) => font};
  font-weight: ${({ fontWeight }: IStylesProps) => fontWeight };
  font-size: 42px;
  line-height: 44px;
  letter-spacing: 0.21px;
  display: flex;
  justify-content: ${({ align }: IStylesProps) => align};
  color: ${({ color }: IStylesProps) => color};
`;

export const DisplaySmall = styled.Text`
  ${({ styles }) => styles};
  font-family: ${({ font }: IStylesProps) => font};
  font-weight: ${({ fontWeight }: IStylesProps) => fontWeight };
  font-size: 40px;
  line-height: 42px;
  letter-spacing: 0.20px;
  display: flex;
  justify-content: ${({ align }: IStylesProps) => align};
  color: ${({ color }: IStylesProps) => color};
`;

export const DisplayXSmall = styled.Text`
  ${({ styles }) => styles};
  font-family: ${({ font }: IStylesProps) => font};
  font-weight: ${({ fontWeight }: IStylesProps) => fontWeight };
  font-size: 38px;
  line-height: 40px;
  letter-spacing: 0.19px;
  display: flex;
  justify-content: ${({ align }: IStylesProps) => align};
  color: ${({ color }: IStylesProps) => color};
`;

export const HtmlContent = styled(RenderHtml)`
`;
