import styled from 'styled-components/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 Heading = styled.Text`
  font-family: ${FONTS?.REGULAR};
  font-size: ${wp(4)}px;
  padding-bottom: ${hp(3)}px;
  color: #fff;
`;

export const SearchWrapper = styled.View`
  flex-direction: row;
  padding: ${wp(2)}px;
  border: 1px solid #373e97;
  border-radius: ${wp(2)}px;
  height: ${hp(7)}px;
  align-items: center;
  margin-bottom: ${hp(3)}px;
`;

export const StyledTextInput = styled.TextInput`
  width: 100%;
  font-family: ${FONTS?.REGULAR};
  font-size: ${wp(3.5)}px;
  margin-left: ${wp(2)}px;
  padding: 0;
`;

export const Card = styled.View<{
  preSelected: boolean;
}>`
  flex-direction: row;
  padding: ${wp(2)}px;
  background-color: ${({preSelected}) =>
    preSelected ? '#0F123A' : `${THEME?.INFO?.MAIN}`};
  border-radius: ${wp(2)}px;
  height: ${hp(7)}px;
  align-items: center;
  margin-bottom: ${hp(1)}px;
`;

export const IconWrapper = styled.View`
  margin: ${wp(2)}px;
`;

export const StyledIconWrapper = styled(IconWrapper)`
  align-self: center;
`;
export const Title = styled.Text<{
  preSelected?: boolean;
}>`
  font-family: ${FONTS?.REGULAR};
  font-size: ${wp(3.8)}px;
  color: ${({preSelected}) =>
    preSelected ? `${THEME.SECONDARY.LIGHT}` : '#fff'}; ;
`;