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;
  fontWeight: number;
  letterSpacing: string;
  lineHeight: string;
  size: string;
  styles?: CSSObject;
  weight?: string;
}

export const Title = styled.Text`
  ${({ styles }) => styles};
  color: ${({ color }: IStylesProps) => color};
  display: flex;
  font-family: ${({ font }: IStylesProps) => font};
  font-size: ${({ size }: IStylesProps) => size};
  justify-content: ${({ align }: IStylesProps) => align};
  letter-spacing: ${({ letterSpacing }: IStylesProps) => letterSpacing};
  line-height: ${({ lineHeight }: IStylesProps) => lineHeight};
  text-transform: uppercase;
  ${({ fontWeight }: IStylesProps) => {
    if (Platform.OS == "ios") {
      return { fontWeight };
    }
  }}
`;

export const HtmlContent = styled(RenderHtml)`
`;
