import { FC } from 'react'
import LogoImage from '../../assets/images/logo.svg'
import LogoSmallImage from '../../assets/images/logo-small.svg'
import { useTranslation } from 'react-i18next'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import RegisterStep1 from './components/RegisterStep1'
import { useAuthStore } from './store/AuthStore'
import RegisterStep2 from './components/RegisterStep2'


const Register: FC = () => {

    const { stepLogin } = useAuthStore()
    const { t } = useTranslation('global')


    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' />
                            <div className=''>
                                <img src={LogoImage} className='w-44  mx-auto my-20 xl:hidden' />
                            </div>
                            <div className=''>
                                <div className='mt-5'>
                                    <h2 className='text-2xl font-bold'>
                                        {t('auth.welcome')}
                                    </h2>
                                    <p className='text-description text-sm mt-2'>
                                        {t('auth.enter_information')}
                                    </p>
                                </div>

                                {
                                    stepLogin === 1 ?
                                        <RegisterStep1 />
                                        :
                                        <RegisterStep2 />
                                }

                                <div className='mt-6 flex justify-center gap-2 items-center text-sm'>
                                    <p className='text-description'>
                                        {t('auth.before_registered')}
                                    </p>
                                    <Link to={Pages.auth.login}>
                                        <div>{t('auth.login')}</div>
                                    </Link>
                                </div>

                            </div>
                        </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 Register