import { FC, Fragment } from 'react'
import { useTranslation } from 'react-i18next'
import { useGetRealInfo } from '../../financial/hooks/useFinancialData'



const RealInfo: FC = () => {

    const { t } = useTranslation('global')
    const { data: d } = useGetRealInfo()

    const data = d?.data?.realUser

    return (
        <Fragment>
            <div className='mt-8 flex xl:flex-row flex-col xl:gap-16 gap-4 xl:items-center text-xs'>
                <div className='flex gap-2'>
                    <div className='text-description'>
                        {t('receip.type_person')}
                    </div>
                    <div>
                        {t('receip.real_person')}
                    </div>
                </div>

                <div className='flex gap-2'>
                    <div className='text-description'>
                        {t('receip.fullName')}
                    </div>
                    <div>
                        {data?.firstName + ' ' + data?.lastName}
                    </div>
                </div>

                <div className='flex gap-2'>
                    <div className='text-description'>
                        {t('financial.father_name')}
                    </div>
                    <div>
                        {data?.fatherName}
                    </div>
                </div>
                <div className='flex gap-2'>
                    <div className='text-description'>
                        {t('financial.sex')}
                    </div>
                    <div>
                        {data?.gender === 'MALE' ? 'مرد' : 'زن'}
                    </div>
                </div>
            </div>

            <div className='mt-8 border-t pt-7 flex xl:flex-row flex-col xl:gap-16 gap-4 xl:items-center text-xs'>
                <div className='flex gap-2'>
                    <div className='text-description'>
                        {t('financial.phone')}
                    </div>
                    <div>
                        {data?.phone}
                    </div>
                </div>



                <div className='flex gap-2'>
                    <div className='text-description'>
                        {t('receip.postal_code')}
                    </div>
                    <div>
                        {data?.address?.postalCode}
                    </div>
                </div>

            </div>

            <div className='mt-6 flex xl:flex-row flex-col xl:gap-16 gap-4 xl:items-center  text-xs'>
                <div className='flex gap-2'>
                    <div className='text-description'>
                        {t('receip.state')}
                    </div>
                    <div>
                        {data?.address?.city?.province?.name}
                    </div>
                </div>
                <div className='flex gap-2'>
                    <div className='text-description'>
                        {t('receip.city')}
                    </div>
                    <div>
                        {data?.address?.city?.name}
                    </div>
                </div>

                <div className='flex gap-2'>
                    <div className='text-description'>
                        {t('receip.address')}
                    </div>
                    <div>
                        {data?.address?.fullAddress}
                    </div>
                </div>
            </div>
        </Fragment>
    )
}

export default RealInfo