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'

const Login: FC = () => {

    const { t } = useTranslation('global')

    return (
        <div className='w-full h-full flex justify-center py-[100px] items-center px-10'>
            <div className='flex w-full max-w-[1200px] bg-secondary h-full rounded-3xl overflow-hidden'>
                <div className='flex-1 min-w-[50%] overflow-y-auto  bg-white p-9'>
                    <div className=''>
                        <img src={LogoSmallImage} className='w-8' />
                        <div className='mt-5'>
                            <h2 className='text-3xl font-bold'>
                                {t('auth.welcome')}
                            </h2>
                            <p className='text-description mt-2'>
                                {t('auth.enter_information')}
                            </p>
                        </div>

                        <div className='mt-8'>
                            {t('auth.user_info')}
                        </div>

                        <div className='mt-6 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-6 min-w-full rowTwoInput'>
                            <DatePickerComponent label={t('auth.dateofbirth')} onChange={(date: string) => console.log(date)} placeholder={t('auth.select_date')} />
                            <Input
                                label={t('auth.family')}
                                placeholder={t('auth.enter_family')}
                            />
                        </div>

                        <div className='mt-6 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-6 rowTwoInput'>
                            <Input
                                label={t('auth.password')}
                                placeholder={t('auth.enter_password')}
                                type='password'
                            />
                        </div>

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

                    </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 Login