import { Calendar, CardPos, Document, DocumentDownload, DollarCircle, Eye, NoteText, Printer, Profile, Receipt, Status, Wallet1 } from 'iconsax-react'
import { FC, useState } from 'react'
import DefaulModal from '../../../components/DefaulModal'
import { useTranslation } from 'react-i18next'
import StatusCircle from '../../../components/StatusCircle'
import Button from '../../../components/Button'

const Detail: FC = () => {

    const { t } = useTranslation('global')
    const [showModal, setShowModal] = useState<boolean>(false)

    return (
        <div>
            <Eye onClick={() => setShowModal(true)} className='cursor-pointer' size={20} color='black' />

            <DefaulModal
                open={showModal}
                close={() => setShowModal(false)}
                isHeader
                title_header={`${t('transaction.transaction2')} ۱۲۳۴۵۵`}
            >
                <div className='my-10'>
                    <div className='flex xl:flex-row flex-col gap-8'>
                        <div className='flex-1 px-6 h-10 flex justify-between items-center'>
                            <div className='flex gap-2 text-description'>
                                <CardPos size={14} color='#8C90A3' />
                                <div>
                                    {t('transaction.type_deposit')}
                                </div>
                            </div>
                            <div>
                                واریز شتابی
                            </div>
                        </div>
                        <div className='flex-1 px-6 h-10 flex justify-between items-center'>
                            <div className='flex gap-2 text-description'>
                                <Status size={14} color='#8C90A3' />
                                <div>
                                    {t('transaction.status')}
                                </div>
                            </div>
                            <div className='flex gap-2 items-center'>
                                <StatusCircle
                                    color='#00BA4B'
                                />
                                <div>{t('transaction.success_paid')}</div>
                            </div>
                        </div>
                    </div>
                    <div className='flex mt-8 xl:mt-0 xl:flex-row flex-col gap-8'>
                        <div className='flex-1 px-6 h-10 flex justify-between items-center'>
                            <div className='flex gap-2 text-description'>
                                <Wallet1 size={14} color='#8C90A3' />
                                <div>
                                    {t('transaction.type_getway')}
                                </div>
                            </div>
                            <div>
                                آنلاین بانک سامان
                            </div>
                        </div>
                        <div className='flex-1 px-6 h-10 flex justify-between items-center'>
                            <div className='flex gap-2 text-description'>
                                <DollarCircle size={14} color='#8C90A3' />
                                <div>
                                    {t('transaction.amount')}
                                </div>
                            </div>
                            <div className='flex gap-2 items-center'>
                                ۱۰,۰۰۰,۰۰۰ ریال
                            </div>
                        </div>
                    </div>

                    <div className='flex mt-8 xl:mt-0 xl:flex-row flex-col gap-8'>
                        <div className='flex-1 px-6 h-10 flex justify-between items-center'>
                            <div className='flex gap-2 text-description'>
                                <Profile size={14} color='#8C90A3' />
                                <div>
                                    {t('transaction.doer')}
                                </div>
                            </div>
                            <div>
                                مهرداد مظفری
                            </div>
                        </div>
                        <div className='flex-1 px-6 h-10 flex justify-between items-center'>
                            <div className='flex gap-2 text-description'>
                                <Calendar size={14} color='#8C90A3' />
                                <div>
                                    {t('transaction.date')}
                                </div>
                            </div>
                            <div className='flex gap-2 items-center'>
                                ۱۴۰۳/۰۹/۳۰
                            </div>
                        </div>
                    </div>
                    <div className='flex mt-8 xl:mt-0 xl:flex-row flex-col gap-8'>
                        <div className='flex-1 px-6 h-10 flex justify-between items-center'>
                            <div className='flex gap-2 text-description'>
                                <Document size={14} color='#8C90A3' />
                                <div>
                                    {t('transaction.tracking_number')}
                                </div>
                            </div>
                            <div>
                                bbd704c-۱۲۳۴۵۶
                            </div>
                        </div>
                        <div className='flex-1 px-6 h-10 flex justify-between items-center'>
                            <div className='flex gap-2 text-description'>
                                <Receipt size={14} color='#8C90A3' />
                                <div>
                                    {t('transaction.order_number')}
                                </div>
                            </div>
                            <div className='flex gap-2 items-center'>
                                bbd704c-۱۲۳۴۵۶
                            </div>
                        </div>
                    </div>

                    <div className='flex mt-8 xl:mt-0 xl:flex-row flex-col gap-8'>
                        <div className='flex-1 px-6 h-10 flex justify-between items-center'>
                            <div className='flex gap-2 text-description'>
                                <NoteText size={14} color='#8C90A3' />
                                <div>
                                    {t('transaction.description_transaction')}
                                </div>
                            </div>
                            <div>
                                -
                            </div>
                        </div>
                    </div>
                </div>

                <div className='border-t pt-8 flex justify-end border-white border-opacity-40'>
                    <div className='flex gap-5'>
                        <Button
                            className='bg-white bg-opacity-35 w-[170px] text-description'
                        >
                            <div className='flex gap-2 items-center  justify-center'>
                                <Printer
                                    size={20}
                                    color='#8C90A3'
                                />
                                <div>
                                    {t('transaction.print')}
                                </div>
                            </div>

                        </Button>
                        <Button
                            className='bg-black w-[170px] '
                        >
                            <div className='flex gap-2 items-center  justify-center'>
                                <DocumentDownload
                                    size={20}
                                    color='white'
                                />
                                <div>
                                    {t('transaction.download')}
                                </div>
                            </div>

                        </Button>
                    </div>
                </div>
            </DefaulModal>
        </div>
    )
}

export default Detail