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

export const Title = styled.Text`
  font-family: ${FONTS?.REGULAR};
  font-size: ${wp(5)}px;
  color: #fff;
  margin-bottom: ${hp(2)}px;
`;

export const Description = styled.Text`
  color: ${THEME?.SECONDARY?.LIGHT};
  font-family: ${FONTS?.REGULAR};
  font-size: ${wp(4)}px;
  margin-bottom: ${hp(3)}px;
`;

export const IconWrapper = styled.TouchableOpacity<{
  showButton?: boolean;
}>`
  width: 50px;
  height: 50px;
  background: #7ed7dd;
  position: absolute;
  left: ${wp(78)}px;
  bottom: ${({showButton}) => (showButton ? `${hp(15)}px` : `${hp(5)}px`)};
  border-radius: 25px;
  align-items: center;
  justify-content: center;
`;

export const Icon = styled(DownArrow)`
  align-self: center;
`;

export const PrivacyPolicyLink = styled.Text`
  font-weight: bold;
  text-decoration: underline;
`;