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

export const Title = styled.Text`
  color: #fff;
  text-align: center;
  font-size: ${wp(6)}px;
  font-family: ${FONTS?.MEDIUM};
`;

export const PhoneNumber = styled.Text`
  color: ${THEME?.SECONDARY?.LIGHT};
  text-align: center;
  font-size: ${wp(4)}px;
  font-family: ${FONTS?.MEDIUM};
  padding-top: ${wp(2)}px;
`;

export const EditDetailsButton = styled(Button)`
  background-color: transparent;
  align-self: center;
  padding: 0;
  margin-top: ${wp(4)}px;
`;

export const Option = styled.TouchableOpacity<{
  borderBottom?: boolean;
  background?: boolean;
  borderRadius?: boolean;
}>`
  background-color: ${props =>
    props?.background ? THEME?.INFO?.MAIN : 'transparent'};
  padding: ${wp(5)}px;
  border-bottom-width: ${props => (props?.borderBottom ? '1px' : '0px')};
  border-bottom-color: ${props =>
    props?.borderBottom ? '#0D1036' : 'transparent'};
  flex-direction: row;
  align-items: center;
  border-radius: ${props => (props?.borderRadius ? `${wp(3)}px` : '0px')};
`;

export const Options = styled.TouchableOpacity`
  background-color: ${THEME?.INFO?.MAIN};
  border-radius: ${wp(3)}px;
  margin-bottom: ${wp(4)}px;
  margin-top: ${hp(5)}px;
`;

export const OptionTitle = styled.Text`
  flex: 1;
  padding-left: ${wp(5)}px;
  color: #fff;
  font-family: ${FONTS?.MEDIUM};
  font-size: ${wp(4)}px;
`;