import { ArrowRight, MoneyRecive, MoneySend } from 'iconsax-react'
import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import Td from '../../components/Td'
import Detail from './components/Detail'

const TransactionList: FC = () => {

    const { t } = useTranslation('global')

    return (
        <div className='mt-4'>
            <div>
                {t('transaction.transaction')}
            </div>

            <div className='mt-6 flex xl:gap-6 gap-1 justify-center'>
                <div className='bg-white flex-1 rounded-2xl xl:p-6 py-2 px-4 xl:max-w-[253px]'>
                    <div className='flex xl:flex-row flex-col gap-2 items-center'>
                        <div className='size-8 bg-[#EEF0F7] rounded-full flex justify-center items-center'>
                            <MoneySend size={18} color='black' />
                        </div>
                        <div className='xl:text-xs text-[10px] text-[#101828]'>
                            {t('transaction.totao_deposit')}
                        </div>
                    </div>
                    <div className='mt-2 flex xl:flex-row flex-col gap-2 items-center'>
                        <div className='text-[#101828] xl:text-xs text-[10px]'>
                            ۱۴۰,۰۰۰,۰۰۰ ریال
                        </div>
                        <div className='flex gap gap-0.5 px-2 py-1 bg-green-100 rounded-lg text-[10px] text-success'>
                            <ArrowRight size={12} color='#00BA4B' className='-rotate-45' />
                            <div>۳۰٪</div>
                        </div>
                    </div>
                </div>
                <div className='bg-white flex-1 rounded-2xl xl:p-6 py-2 px-4 xl:max-w-[253px]'>
                    <div className='flex xl:flex-row flex-col gap-2 items-center'>
                        <div className='size-8 bg-[#EEF0F7] rounded-full flex justify-center items-center'>
                            <MoneyRecive size={18} color='black' />
                        </div>
                        <div className='xl:text-xs text-[10px] text-[#101828]'>
                            {t('transaction.total_withdrawal')}
                        </div>
                    </div>
                    <div className='mt-2 flex xl:flex-row flex-col gap-2 items-center'>
                        <div className='text-[#101828] xl:text-xs text-[10px]'>
                            ۱۴۰,۰۰۰,۰۰۰ ریال
                        </div>
                        <div className='flex gap gap-0.5 px-2 py-1 bg-green-100 rounded-lg text-[10px] text-success'>
                            <ArrowRight size={12} color='#00BA4B' className='-rotate-45' />
                            <div>۳۰٪</div>
                        </div>
                    </div>
                </div>
                <div className='bg-white flex-1 rounded-2xl xl:p-6 py-2 px-4 xl:max-w-[253px]'>
                    <div className='flex xl:flex-row flex-col gap-2 items-center'>
                        <div className='size-8 bg-[#EEF0F7] rounded-full flex xl:flex-row flex-col justify-center items-center'>
                            <MoneyRecive size={18} color='black' />
                        </div>
                        <div className='xl:text-xs text-[10px] text-[#101828]'>
                            {t('transaction.balance')}
                        </div>
                    </div>
                    <div className='mt-2 flex xl:flex-row flex-col gap-2 items-center'>
                        <div className='text-[#101828] xl:text-xs text-[10px]'>
                            ۱۴۰,۰۰۰,۰۰۰ ریال
                        </div>
                        <div className='flex gap gap-0.5 px-2 py-1 text-red-400 rounded-lg text-[10px] bg-red-100'>
                            <ArrowRight size={12} color='red' className='rotate-45' />
                            <div>۳۰٪</div>
                        </div>
                    </div>
                </div>
            </div>

            <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
                <table className='w-full text-sm '>
                    <thead className='thead'>
                        <tr>
                            <Td text={t('ticket.number')} />
                            <Td text={t('ticket.title')} />
                            <Td text={t('ticket.team')} />
                            <Td text={t('ticket.date')} />
                            <Td text={t('ticket.status')} />
                            <Td text={t('ticket.priority')} />
                            <Td text={t('ticket.detail')} />
                            <Td text={''} />
                        </tr>
                    </thead>
                    <tbody>
                        <tr className='tr'>
                            <Td text={t('ticket.number')} />
                            <Td text={t('ticket.title')} />
                            <Td text={t('ticket.team')} />
                            <Td text={t('ticket.date')} />
                            <Td text={t('ticket.status')} />
                            <Td text={t('ticket.priority')} />
                            <Td text={t('ticket.detail')} />
                            <Td text={''}>
                                <Detail
                                />
                            </Td>
                        </tr>
                        <tr className='tr'>
                            <Td text={t('ticket.number')} />
                            <Td text={t('ticket.title')} />
                            <Td text={t('ticket.team')} />
                            <Td text={t('ticket.date')} />
                            <Td text={t('ticket.status')} />
                            <Td text={t('ticket.priority')} />
                            <Td text={t('ticket.detail')} />
                            <Td text={''} />
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>
    )
}

export default TransactionList