import { FC, Fragment } from 'react'
import { useTranslation } from 'react-i18next'
import { FinancialDataType } from '../../financial/types/FinancialTypes'
import { InfoCircle } from 'iconsax-react'
import Button from '../../../components/Button'
import { Link } from 'react-router-dom'
import { Pages } from '../../../config/Pages'

type Props = {
    data: FinancialDataType
}

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

    const { t } = useTranslation('global')

    return (
        <Fragment>

            <div className='mt-8 xl:flex-row flex-col xl:h-10 py-4 xl:py-0 text-xs bg-[#FFF2F2] text-[#DB0105] rounded-xl px-4 flex gap-2 items-center'>
                <InfoCircle
                    size={18}
                    color='#DB0105'
                    className='min-w-[18px]'
                />
                <div className='text-center xl:text-right'>{t('receip.compelete_financal_info_error')}</div>

                <div className='flex-1 flex xl:justify-end'>
                    <Link to={Pages.financial}>
                        <Button
                            label={t('receip.compelete_financal_info')}
                            className='w-fit whitespace-nowrap px-4 h-7 text-[10px]'
                        />
                    </Link>
                </div>
            </div>
            <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.phone')}
                    </div>
                    <div>
                        {data.user?.phone}
                    </div>
                </div>
            </div>
        </Fragment>
    )
}

export default RegisterInfo