import { Text, View, StyleSheet } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { useEffect, useState } from 'react';
import ForgetPasswordPage from './formComponent/form';
import { forgetPasswordFormData } from '../../types/signup';

const ForgetPasswordMultiStepForm: React.FC = () => {
    const [forgetPasswordFormData, setForgetPasswordFormData] =
        useState<forgetPasswordFormData>({
            phone: '',
            phoneVerificationStatus: false,
            otp: '',
            otpSent: false,
            otpAuthCompleted: false,
            newPassword: '',
            confirmedNewPassword: ''
        });

    useEffect(() => {
        console.log(forgetPasswordFormData);
    }, [forgetPasswordFormData]);

    return (
        <View style={styles.container}>
            <ForgetPasswordPage
                forgetPasswordFormData={forgetPasswordFormData}
                setForgetPasswordFormData={setForgetPasswordFormData}
            />
            <StatusBar style="auto" />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFFFFF'
    }
});

export default ForgetPasswordMultiStepForm;
