import React, { useState } from 'react';
import { Text, View } from 'react-native';

import { PageWrapper, BigText, Input, Button } from '../../components/';

import { styles } from './styles';

const ResetPasswordDeepScreen = () => {
  const [pass, setPass] = useState('');
  const [repPass, setRepPass] = useState('');

  //TODO: Add pass checks | add res pass functionality

  return (
    <PageWrapper style={{ marginTop: '10%' }}>
      <View style={{ gap: 15 }}>
        <BigText>Reset password</BigText>
        <Text style={styles.smallText}>
          Minimum length of the password must be equal or greater 8 symbols. Leading and trailing
          spaces will be ignored
        </Text>
        <Input placeholder={'Password'} onChange={(s) => setPass(s)} header={'New password'} />
        <Input
          placeholder={'Repeat password'}
          onChange={(s) => setRepPass(s)}
          header={'Confirm new password'}
        />
      </View>
      <View style={{ marginTop: '10%' }}>
        <Button>Reset password</Button>
      </View>
    </PageWrapper>
  );
};

export default ResetPasswordDeepScreen;