import { IonContent, IonPage, IonButton } from '@ionic/react';
import { mailOpenOutline } from 'ionicons/icons';
import React from 'react';
import InputWidget from '../../components/input/InputWidget';
import styles from './ForgotPassword.module.scss';
import loginStyles  from '../../commonStyles/loginFlow/LoginStyles.module.scss';

type Props = {
    changeStep:any,
    forgotPasswordStep:string
 };

const ForgotPasswordPage: React.FC<Props> = (props) => {
    return (
            <IonContent fullscreen>
                <section className={loginStyles.upfold}>
                    <div className={loginStyles.container}>
                        <figure>
                            <img src='assets/images/welcome/upfold.svg' alt='upfold image'/>
                        </figure>
                        <h2> Forgot your Password? </h2>
                        <p> Lorem Ipsum is simply dummy text of the printing and typesetting </p>
                    </div>
                </section>
                <section className={styles.inputForm}>
                    <div className={styles.input}>
                        <InputWidget type={'TEXT'} icon={mailOpenOutline} placeholder={'Email'} />
                    </div>
                    <div className={ styles.info }>
                        Enter your registered email address to reset password through the OTP
                    </div>

                    <div className={styles.actionButtonsHolder}>
                        <IonButton className={styles.actionButton} onClick={()=>props.changeStep('OTP')} expand='block'> Send OTP </IonButton>
                    </div>   
                </section>
            </IonContent>
            )
}

export default ForgotPasswordPage;