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

type Props = {
    data: FinancialDataType
}

const LegalInfo: 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>
                        {
                            data?.user?.legalUser ?
                                t('receip.company') :
                                t('receip.real_person')
                        }
                    </div>
                </div>

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

                <div className='flex gap-2'>
                    <div className='text-description'>
                        {t('receip.company_name')}
                    </div>
                    <div>
                        {data.user?.legalUser?.companyRegisteredName}
                    </div>
                </div>
                <div className='flex gap-2'>
                    <div className='text-description'>
                        {t('receip.registration_number')}
                    </div>
                    <div>
                        {data.user?.legalUser?.registrationId}
                    </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('receip.tel_company')}
                    </div>
                    <div>
                        {data.user?.legalUser?.number}
                    </div>
                </div>

                <div className='flex gap-2'>
                    <div className='text-description'>
                        {t('receip.national_code')}
                    </div>
                    <div>
                        {data?.user?.legalUser?.nationalId}
                    </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 LegalInfo