import React from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
import InputIcon from '../../components/Input/InputIcon';
import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
import R from '../../assets/R';

const Registor = (props) => {
  const {navigation} = props;
  return (
    <View
      style={{
        flex: 1,
        paddingHorizontal: 20,
        paddingTop: 20,
        backgroundColor: 'white',
      }}>
      <InputIcon
        icon={R.images.iconEmail}
        title={'Email đăng ký'}
        placeholder={'Nhập email'}
      />
      <InputIcon
        icon={R.images.iconPhone3}
        title={'Số điện thoại đăng ký'}
        placeholder={'Nhập số điện thoại'}
      />
      <InputIcon
        icon={R.images.iconLock}
        title={'Mật khẩu'}
        placeholder={'Nhập mật khẩu'}
      />
      <InputIcon
        icon={R.images.iconLock}
        title={'Nhập lại mật khẩu'}
        placeholder={'Nhập mật khẩu'}
      />

      <View
        style={{
          marginVertical: 20,

          alignItems: 'center',
        }}>
        <View style={styles.wrapLogin}>
          <Text style={styles.txtLogin}>Đăng ký</Text>
          <Image source={R.images.iconRight1} style={styles.imgIcon} />
        </View>

        <View style={styles.row}>
          <Text style={styles.txtTitle}>Bạn đã có tài khoản?</Text>
          <TouchableOpacity
            onPress={() => {
              navigation.navigate('LOGIN');
            }}>
            <Text style={styles.txtRegistor}>Đăng nhập</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  forgotView: {
    marginVertical: 20,
    alignItems: 'flex-end',
  },
  txtTitle: {
    fontSize: getFontXD(42),
    color: '#929292',
  },
  txtLogin: {
    fontSize: getFontXD(48),
    color: 'white',
    fontWeight: '700',
  },
  wrapLogin: {
    width: WIDTHXD(512),
    height: HEIGHTXD(150),
    backgroundColor: '#1C6AF6',
    borderRadius: 30,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  imgIcon: {
    width: WIDTHXD(72),
    height: HEIGHTXD(72),
    marginLeft: 5,
  },
  row: {
    flexDirection: 'row',
    marginTop: 30,
  },
  txtRegistor: {
    fontSize: getFontXD(42),
    color: '#1473E6',
  },
});

export default Registor;
