import styled from 'styled-components/native';
import {TextInput} from 'react-native';
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from 'react-native-responsive-screen';
import FONTS from '@assets/fonts';
import THEME from '@styles/theme';

export const Wrapper = styled.View``;

export const InputWrapper = styled.View`
  background-color: ${THEME?.PRIMARY?.DARK};
  border-radius: ${wp(2)}px;
  display: flex;
  flex-direction: row;
  align-items: center;
`;

export const StyledTextInput = styled(TextInput)`
  height: ${wp(14)}px;
  padding: 0 ${wp(2)}px;
  font-family: ${FONTS?.SEMI_BOLD};
  color: #ffffff;
  font-size: ${wp(4)}px;
  flex: 1;
`;

export const Error = styled.Text`
  color: red;
  position: absolute;
  bottom: -${wp(4.5)}px;
  font-family: ${FONTS?.REGULAR};
  font-size: ${wp(3)}px;
`;

export const Label = styled.Text`
  font-family: ${FONTS?.BOLD};
  font-size: ${wp(3.3)}px;
  margin-bottom: ${hp(1)}px;
  color: ${THEME?.SECONDARY?.LIGHT};
`;

export const FlagWrapper = styled.View`
  display: flex;
  flex-direction: row;
  border-right-color: ${THEME?.INFO?.MAIN};
  border-right-width: 1px;
  border-right-style: solid;
  height: 100%;
  align-items: center;
  padding: 0 ${wp(3)}px;
`;

export const CountryCode = styled.Text`
  color: #ffffff;
  padding-left: ${wp(2)}px;
  font-family: ${FONTS?.SEMI_BOLD};
  font-size: ${wp(4)}px;
`;

export const Flag = styled.Image``;