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

const {
  mediaQuery: { tablet, mobile },
} = mxSetup;

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

export const HeadlineXLarge = styled.Text`
  ${({ styles }) => styles};
  font-family: ${({ font }: IStylesProps) => font};
  font-size: 34px;
  line-height: 44px;
  display: flex;
  justify-content: ${({ align }: IStylesProps) => align};
  color: ${({ color }: IStylesProps) => color};
  ${({ fontWeight }: IStylesProps) => {
    if (Platform.OS == "ios") {
      return { fontWeight };
    }
  }}

  @media (max-width: ${mobile.max} ) {
    font-size: 24px;
    line-height: 32px;
  }

  @media (min-width: ${tablet.min}) and (max-width: ${tablet.max} ) {
    font-size: 32px;
    line-height: 40px;
  }
`;

export const HeadlineLarge = styled.Text`
  ${({ styles }) => styles};
  font-family: ${({ font }: IStylesProps) => font};
  font-size: 28px;
  line-height: 32px;
  display: flex;
  justify-content: ${({ align }: IStylesProps) => align};
  color: ${({ color }: IStylesProps) => color};
  ${({ fontWeight }: IStylesProps) => {
    if (Platform.OS == "ios") {
      return { fontWeight };
    }
  }}

  @media (max-width: ${mobile.max} ) {
    font-size: 18px;
    line-height: 24px;
  }

  @media (min-width: ${tablet.min}) and (max-width: ${tablet.max} ) {
    font-size: 24px;
    line-height: 32px;
  }
`;

export const HeadlineMedium = styled.Text`
  ${({ styles }) => styles};
  font-family: ${({ font }: IStylesProps) => font};
  font-size: 22px;
  line-height: 24px;
  display: flex;
  justify-content: ${({ align }: IStylesProps) => align};
  color: ${({ color }: IStylesProps) => color};
  ${({ fontWeight }: IStylesProps) => {
    if (Platform.OS == "ios") {
      return { fontWeight };
    }
  }}

  @media (max-width: ${mobile.max} ) {
    font-size: 16px;
    line-height: 20px;
  }

  @media (min-width: ${tablet.min}) and (max-width: ${tablet.max} ) {
    font-size: 20px;
    line-height: 24px;
  }
`;

export const HeadlineSmall = styled.Text`
  ${({ styles }) => styles};
  font-family: ${({ font }: IStylesProps) => font};
  font-size: 16px;
  line-height: 20px;
  display: flex;
  justify-content: ${({ align }: IStylesProps) => align};
  color: ${({ color }: IStylesProps) => color};
  ${({ fontWeight }: IStylesProps) => {
    if (Platform.OS == "ios") {
      return { fontWeight };
    }
  }}

  @media (max-width: ${mobile.max} ) {
    font-size: 14px;
    line-height: 20px;
  }

  @media (min-width: ${tablet.min}) and (max-width: ${tablet.max} ) {
    font-size: 16px;
    line-height: 20px;
  }
`;

export const HeadlineXSmall = styled.Text`
  ${({ styles }) => styles};
  font-family: ${({ font }: IStylesProps) => font};
  font-size: 14px;
  line-height: 16px;
  display: flex;
  justify-content: ${({ align }: IStylesProps) => align};
  color: ${({ color }: IStylesProps) => color};
  ${({ fontWeight }: IStylesProps) => {
    if (Platform.OS == "ios") {
      return { fontWeight };
    }
  }}

  @media (max-width: ${mobile.max} ) {
    font-size: 13px;
    line-height: 20px;
  }

  @media (min-width: ${tablet.min}) and (max-width: ${tablet.max} ) {
    line-height: 20px;
  }
`;

export const HtmlContent = styled(RenderHtml)`
`;
