import {StyleSheet, Dimensions, Platform} from 'react-native';
import {RFValue} from 'react-native-responsive-fontsize';
import {Colors, FONTS} from 'global-styles';
const {width} = Dimensions.get('window');

export default StyleSheet.create({
  container: {
    flex: 1,
    // paddingHorizontal: width * 0.03,
    justifyContent: 'center',
  },
  content: {
    backgroundColor: Colors.WHITE,
    paddingVertical: width * 0.04,
    paddingHorizontal: width * 0.03,
    borderRadius: width * 0.02,
  },
  top: {
    alignItems: 'center',
  },
  image: {
    width: width * 0.22,
    height: width * 0.22,
  },
  title: {
    fontFamily: FONTS.poppins[600],
    color: Colors.TEXT,
    fontSize: RFValue(12.5),
    textAlign: 'center',
  },
  subTitle: {
    fontFamily: FONTS.poppins[500],
    color: Colors.GREY_TEXT,
    fontSize: RFValue(11),
    textAlign: 'center',
  },
  subTitleBlack: {
    fontFamily: FONTS.poppins[500],
    color: Colors.TEXT,
    fontSize: RFValue(11),
    textAlign: 'center',
  },

  boxSection: {
    width: '100%',
    paddingHorizontal: width * 0.06,
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: width * 0.06,
    justifyContent: 'space-around',
  },
  box: isFocued => ({
    width: width * 0.125,
    height: width * 0.135,
    borderWidth: 1,
    borderColor: isFocued ? Colors.PRIMARY : Colors.RED_SHADOW,
    backgroundColor: Colors.RED_SHADOW,
    borderRadius: width * 0.02,
    alignItems: 'center',
    justifyContent: 'center',
  }),
  boxText: {
    fontFamily: FONTS.poppins[500],
    color: Colors.PRIMARY,
    fontSize: RFValue(22),
    marginTop: width * 0.008,
  },
  inputHidden: {
    position: 'absolute',
    opacity: 0,
  },

  resendSection: {
    marginTop: width * 0.05,
    alignItems: 'center',
    justifyContent: 'center',
  },
  resendLabel: {
    fontFamily: FONTS.poppins[500],
    color: Colors.GREY_TEXT,
    fontSize: RFValue(10),
  },
  resendButtonText: {
    fontFamily: FONTS.poppins[600],
    color: Colors.PRIMARY,
    fontSize: RFValue(10),
    textDecorationLine: 'underline',
  },

  button: disable => ({
    backgroundColor: Colors.PRIMARY,
    width: width * 0.7,
    height: width * 0.11,
    borderRadius: width,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: width * 0.05,
    opacity: disable ? 0.5 : 1,
  }),
  buttonTitle: {
    fontFamily: FONTS.poppins[500],
    color: Colors.WHITE,
    fontSize: RFValue(12),
    marginTop: width * 0.005,
  },
  error: {
    fontFamily: FONTS.poppins[400],
    fontSize: RFValue(9),
    color: Colors.PRIMARY,
    marginTop: width * 0.015,
  },
});
