import { FC, Fragment } from 'react'
import { FinancialDataType } from '../../financial/types/FinancialTypes'
import { useTranslation } from 'react-i18next'

type Props = {
    data: FinancialDataType
}


const RealInfo: FC<Props> = ({ data }) => {

    const { t } = useTranslation('global')

    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.user?.firstName + ' ' + data.user?.lastName}
                    </div>
                </div>

                <div className='flex gap-2'>
                    <div className='text-description'>
                        {t('financial.father_name')}
                    </div>
                    <div>
                        {data.user?.realUser?.fatherName}
                    </div>
                </div>
                <div className='flex gap-2'>
                    <div className='text-description'>
                        {t('financial.sex')}
                    </div>
                    <div>
                        {data.user?.realUser?.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.user?.phone}
                    </div>
                </div>



                <div className='flex gap-2'>
                    <div className='text-description'>
                        {t('receip.postal_code')}
                    </div>
                    <div>
                        {data.user?.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.user?.address?.city?.province?.name}
                    </div>
                </div>
                <div className='flex gap-2'>
                    <div className='text-description'>
                        {t('receip.city')}
                    </div>
                    <div>
                        {data.user?.address?.city?.name}
                    </div>
                </div>

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

export default RealInfo