import { TickCircle } from 'iconsax-react'
import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { NumberFormat } from '../../config/func'
import Button from '../../components/Button'

const CallBack: FC = () => {

    const { t } = useTranslation('global')

    return (
        <div className='flex  mt-10 flex-col justify-center items-center flex-1  h-full'>
            <TickCircle
                size={64}
                color='#00712D'
            />

            <div className='mt-7 text-xl'>
                {t('callback.title_success')}
            </div>

            <div className='mt-7'>
                {t('callback.desc_success')}
            </div>

            <div className='mt-16 xl:min-w-[560px] bg-[#FBFBFD] p-8 text-sm'>
                <div className='flex justify-between'>
                    <div>
                        {t('callback.order_number')}
                    </div>
                    <div>
                        #1234
                    </div>
                </div>
                <div className='flex justify-between mt-6'>
                    <div>
                        {t('callback.amount')}
                    </div>
                    <div>
                        {NumberFormat(200000) + ' ' + t('toman')}
                    </div>
                </div>
                <div className='flex justify-between mt-6'>
                    <div>
                        {t('callback.date')}
                    </div>
                    <div>
                        ۲۹ بهمن ۱۴۰۳
                    </div>
                </div>
            </div>

            <Button
                label={t('callback.back')}
                className='xl:max-w-[560px] mt-8'
            />
        </div>
    )
}

export default CallBack