import styled from 'styled-components/native';
import {Platform} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from 'react-native-responsive-screen';
import FONTS from '@assets/fonts';
import THEME from '@styles/theme';

export const Container = styled(SafeAreaView)`
  flex: 1;
  background-color: ${THEME?.PRIMARY?.MAIN};
  padding: 0 ${wp(5)}px;
`;

export const Wrapper = styled(KeyboardAwareScrollView)``;

export const Header = styled.View`
  padding-top: ${hp(10)}px;
`;

export const Title = styled.Text`
  font-family: ${FONTS.SEMI_BOLD};
  font-size: ${wp(12)}px;
  padding-top: ${hp(4.5)}px;
  color: #fff;
`;

export const BodyWrapper = styled.View`
  flex: 1;
`;

export const Field = styled.View`
  margin-bottom: ${hp(6)}px;
`;

export const Body = styled.View`
  flex: 1;
  margin-top: ${hp(10)}px;
`;

export const SubTitle = styled.Text`
  font-family: ${FONTS.REGULAR};
  font-size: ${wp(4.5)}px;
  color: ${THEME?.SECONDARY?.LIGHT};
  padding-top: ${hp(1)}px;
`;

export const TermsAndCondition = styled.View``;

export const TermsAndConditionText = styled.Text<{clickable?: boolean}>`
  color: ${props => (props?.clickable ? THEME?.SECONDARY?.LIGHT : '#FFF')};
  font-family: ${FONTS.REGULAR};
  font-size: ${wp(3.6)}px;
`;

export const TermsAndConditionButton = styled.TouchableOpacity``;

export const SubmitButton = styled.View`
  margin-bottom: ${Platform.OS === 'android' ? `${hp(1)}px` : 0};
`;

export const otpButtonStyle = {
  marginBottom: hp(2),
};