import { useState, type FC } from 'react'
import LogoImage from '../../assets/images/logo.svg'
import LogoSmallImage from '../../assets/images/logo-small.svg'
import ForgotStep1 from './components/ForgotStep1'
import ForgotStep2 from './components/ForgotStep2'


const Forgot: FC = () => {

    const [step, setStep] = useState<number>(1)
    const [email, setEmail] = useState<string>('')

    return (
        <div className='w-full h-full flex justify-center lg:py-[75px] py-4 lg:items-center lg:px-10 px-4'>
            <div className='flex w-full max-h-[812px] max-w-[1200px] bg-secondary h-full rounded-3xl overflow-hidden'>
                <div className='flex-1 min-w-[50%] overflow-y-auto  bg-white lg:px-9 px-4 py-7'>
                    <div className='flex-1 h-full flex flex-col'>

                        <div className='flex relative flex-1 flex-col h-full justify-center'>
                            <img src={LogoSmallImage} className='w-8 hidden xl:block' />
                            <img src={LogoImage} className='w-44 right-0 left-0 mx-auto absolute top-10 xl:hidden' />
                            {
                                step === 1 ?
                                    <ForgotStep1 changeEmail={setEmail} changeStep={setStep} />
                                    :
                                    <ForgotStep2 email={email} changeStep={setStep} />
                            }
                        </div>


                    </div>
                </div>

                <div className='flex-1 min-w-[50%] lg:flex hidden justify-center items-center'>
                    <img src={LogoImage} className='h-20' />
                </div>
            </div>
        </div>
    )
}

export default Forgot