import { theme } from 'data/dataMx';
import { Platform } from 'react-native';
import styled from 'styled-components/native';
import { convertCustomTheme } from './index.helper';
import { IPropsStyleLink } from './index.interface';

interface IStylesProps {
  align: string | undefined;
}

export const Wrap = styled.TouchableOpacity`
  justify-content:${({ align }: IStylesProps) =>
    align == 'left' ? 'flex-start' : (align == 'center' ? align : 'flex-end')};
  flex-direction: row;
  align-items: center;
  width: 100%;
`;

export const LinkText = styled.Text`
  ${({ styles }: IPropsStyleLink) => styles};
  font-family: 'Outfit-Regular';
  font-style: normal;
  ${
    () => {
      if (Platform.OS == 'ios') {
        return { fontWeight: 400 }
      }
    }
  }
  font-size: ${({ typeLink }: IPropsStyleLink) => typeLink === 'section' ? '12px' : '16px'};
  line-height: ${({ typeLink }: IPropsStyleLink) => typeLink === 'section' ? '12px' : '20px'};
  display: flex;
  align-items: center;
  text-align: center;
  letter-spacing: 0.5px;
  margin: 0px ${({ typeIcon }: IPropsStyleLink) => typeIcon === 'noIcon' ? '0px' : '2px'};
  color: ${({ color, disabled, customColor }: IPropsStyleLink) => disabled ? theme.neutral500 : color === 'custom'
    ? theme[convertCustomTheme(customColor)]
    : theme[color]};
  text-decoration-color: ${({ color, customColor }: IPropsStyleLink) => color !== 'custom'? theme[color] : theme[convertCustomTheme(customColor)]};
`;