import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { Edit } from 'iconsax-react'
import StatusCircle from '../../components/StatusCircle'
import SamanImage from '../../assets/images/saman.png'

const ReceiptsDetail: FC = () => {

    const { t } = useTranslation('global')

    return (
        <div className='mt-4'>
            <div>
                {t('receip.detail_account')}
                ۱۲۳۱۲
            </div>

            <div className='flex xl:flex-row flex-col mt-8 gap-6'>
                <div className='flex-1'>
                    <div className='w-full bg-white rounded-3xl p-8'>
                        <div className='flex justify-between items-center'>
                            <div>
                                {t('receip.personal_information')}
                            </div>
                            <div className='flex gap-1 items-center text-xs text-[#0047FF]'>
                                <Edit size={16} color='#0047FF' />
                                <div>
                                    {t('edit')}
                                </div>
                            </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.company')}
                                </div>
                            </div>

                            <div className='flex gap-2'>
                                <div className='text-description'>
                                    {t('receip.representativeـname')}
                                </div>
                                <div>
                                    مهرداد مظفری
                                </div>
                            </div>

                            <div className='flex gap-2'>
                                <div className='text-description'>
                                    {t('receip.company_name')}
                                </div>
                                <div>
                                    داناک
                                </div>
                            </div>
                            <div className='flex gap-2'>
                                <div className='text-description'>
                                    {t('receip.registration_number')}
                                </div>
                                <div>
                                    ۱۲۳۴
                                </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>
                                    ۰۰۱۲۳۴۵۶۷۸
                                </div>
                            </div>

                            <div className='flex gap-2'>
                                <div className='text-description'>
                                    {t('receip.national_code')}
                                </div>
                                <div>
                                    ۰۰۱۲۳۴۵۶۷۸
                                </div>
                            </div>

                            <div className='flex gap-2'>
                                <div className='text-description'>
                                    {t('receip.postal_code')}
                                </div>
                                <div>
                                    ۳۸۲۱۳۵۸۸۹۲
                                </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>
                                    مرکزی
                                </div>
                            </div>
                            <div className='flex gap-2'>
                                <div className='text-description'>
                                    {t('receip.state')}
                                </div>
                                <div>
                                    مرکزی
                                </div>
                            </div>
                            <div className='flex gap-2'>
                                <div className='text-description'>
                                    {t('receip.city')}
                                </div>
                                <div>
                                    اراک
                                </div>
                            </div>
                            <div className='flex gap-2'>
                                <div className='text-description'>
                                    {t('receip.address')}
                                </div>
                                <div>
                                    اراک -خیابان شریعتی-خیابان جنت
                                </div>
                            </div>
                        </div>

                    </div>

                    <div className='w-full bg-white rounded-3xl mt-8 p-8'>
                        <div className='flex justify-between items-center'>
                            <div>
                                {t('receip.detail_receip')}
                            </div>
                            <div className='flex gap-2 text-xs items-center'>
                                <StatusCircle
                                    color='#FF7B00'
                                />
                                <div>
                                    {t('receip.not_paid')}
                                </div>
                            </div>
                        </div>

                        <div className='mt-7 text-sm'>
                            <div className='flex justify-between items-center text-description h-14'>
                                <div>
                                    {t('receip.description')}
                                </div>
                                <div>
                                    {t('receip.price')}
                                </div>
                            </div>
                            <div className='flex justify-between items-center text-xs border-t border-[#EAEDF5] h-14'>
                                <div>
                                    اکانت یکساله با دسترسی
                                </div>
                                <div>
                                    ۱۰,۰۰۰,۰۰۰ ریال
                                </div>
                            </div>
                            <div className='flex justify-between items-center text-xs border-t border-[#EAEDF5] h-14'>
                                <div>
                                    ۱۰٪ ارزش افزوده
                                </div>
                                <div>
                                    ۱۰,۰۰۰,۰۰۰ ریال
                                </div>
                            </div>
                            <div className='flex justify-between items-center text-xs border-t border-[#EAEDF5] h-14'>
                                <div>
                                    جمع کل
                                </div>
                                <div>
                                    ۱۰,۰۰۰,۰۰۰ ریال
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className='bg-white xl:w-sidebar text-sm h-fit rounded-3xl p-8'>
                    <div className='flex justify-between items-center'>
                        <div>
                            {t('receip.receip_information')}
                        </div>
                        <div className='flex gap-2 text-xs items-center'>
                            <StatusCircle
                                color='#FF7B00'
                            />
                            <div>پرداخت نشده</div>
                        </div>
                    </div>

                    <div className='mt-6 text-xs font-extralight'>
                        <div className='flex justify-between h-12 border-b items-center'>
                            <div className='text-description'>
                                {t('receip.date_factor')}
                            </div>
                            <div>
                                ۱۴۰۲/۱۰/۰۴
                            </div>
                        </div>
                        <div className='flex justify-between h-12 border-b items-center'>
                            <div className='text-description'>
                                {t('receip.due_date')}
                            </div>
                            <div>
                                ۱۴۰۲/۱۰/۰۴
                            </div>
                        </div>
                        <div className='flex justify-between h-12 border-b items-center'>
                            <div className='text-description'>
                                {t('receip.factor_number')}
                            </div>
                            <div>
                                ۱۲۳۱
                            </div>
                        </div>
                        <div className='flex justify-between h-12 border-b items-center'>
                            <div className='text-description'>
                                {t('receip.status_factor')}
                            </div>
                            <div>
                                تایید شده
                            </div>
                        </div>
                    </div>

                    <div className='mt-5 flex justify-center gap-2'>
                        <div className='border size-[72px] flex-col text-[10px] justify-center items-center rounded-xl border-border flex'>
                            <img src={SamanImage} alt='saman' className='w-8 h-8' />
                            <div className='mt-2'>
                                بانک سامان
                            </div>
                        </div>
                        <div className='border size-[72px] flex-col text-[10px] justify-center items-center rounded-xl border-border flex'>
                            <img src={SamanImage} alt='saman' className='w-8 h-8' />
                            <div className='mt-2'>
                                بانک سامان
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    )
}

export default ReceiptsDetail