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 Input from '../../components/Input'
import DatePickerComponent from '../../components/DatePicker'
import Button from '../../components/Button'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'

const Register: FC = () => {

    const { t } = useTranslation('global')

    return (
        <div className='w-full h-full flex justify-center py-[75px] items-center px-10'>
            <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 px-9 py-7'>
                    <div className=''>
                        <img src={LogoSmallImage} className='w-8' />
                        <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>

                        {/* <div className='mt-5 text-sm'>
                            {t('auth.user_info')}
                        </div> */}

                        <div className='mt-5 rowTwoInput'>
                            <Input
                                label={t('auth.name')}
                                placeholder={t('auth.enter_name')}
                            />

                            <Input
                                label={t('auth.family')}
                                placeholder={t('auth.enter_family')}
                            />

                        </div>
                        <div className='mt-4 min-w-full rowTwoInput'>
                            <DatePickerComponent label={t('auth.dateofbirth')} onChange={(date: string) => console.log(date)} placeholder={t('auth.select_date')} />

                            <Input
                                label={t('auth.national_code')}
                                placeholder={t('auth.national_code_enter')}
                            />

                        </div>

                        <div className='mt-4 rowTwoInput'>
                            <Input
                                label={t('auth.email')}
                                placeholder={t('auth.enter_email')}
                            />
                            <Input
                                label={t('auth.phonen_number')}
                                placeholder={t('auth.enter_phone_number')}
                            />
                        </div>

                        <div className='mt-4 rowTwoInput'>
                            <Input
                                label={t('auth.password')}
                                placeholder={t('auth.enter_password')}
                                type='password'
                            />
                        </div>

                        <Button
                            label={t('auth.next')}
                            className='mt-8'
                        />

                        <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 className='flex-1 min-w-[50%] flex justify-center items-center'>
                    <img src={LogoImage} className='h-20' />
                </div>
            </div>
        </div>
    )
}

export default Register