import { DataTableDemo } from '@/components/ui/datatable'
import { MoneyRecive, MoneySend, Wallet } from 'iconsax-react'
import { ArrowDownLeft, ArrowUpRight } from 'lucide-react'
import React from 'react'

function TransactionsReviewIndex() {
    return (
        <section className='flex flex-col h-svh pb-10 pt-6 gap-4'>
            <h1 className="font-medium text-base">لیست تراکنش ها</h1>

            <div className="grid grid-cols-3 gap-2 h-28">
                <div className="w-full h-full flex flex-col items-center justify-center p-2.5 text-center bg-container rounded-xl">
                    <div className="size-8 bg-background rounded-full grid items-center">
                        <MoneySend className='stroke-primary justify-self-center' size={20} />
                    </div>
                    <span className='text-xs2 pt-1'>مجموع واریز ها</span>
                    <span className='text-xs font-medium mt-1'>140,000,000 ریال</span>
                    <span className='text-xs2 text-green-60mt-0.5 0 bg-green-100 w-min px-1 py-px items-center justify-between rounded-md flex'>
                        <ArrowUpRight size={10} className='stroke-green-600' />
                        <div className="mt-0.5">30%</div>
                    </span>
                </div>
                <div className="w-full h-full flex flex-col items-center justify-between p-2.5 text-center bg-container rounded-xl">
                    <div className="size-8 bg-background rounded-full grid items-center">
                        <MoneyRecive className='stroke-primary justify-self-center' size={20} />
                    </div>
                    <span className='text-xs2 pt-1'>مجموع برداشت ها</span>
                    <span className='text-xs font-medium mt-1'>140,000,000 ریال</span>
                    <span className='text-xs2 text-green-60mt-0.5 0 bg-green-100 w-min px-1 py-px items-center justify-between rounded-md flex'>
                        <ArrowUpRight size={10} className='stroke-green-600' />
                        <div className="mt-0.5">30%</div>
                    </span>
                </div>
                <div className="w-full h-full flex flex-col items-center justify-between p-2.5 text-center bg-container rounded-xl">
                    <div className="size-8 bg-background rounded-full grid items-center">
                        <Wallet className='stroke-primary justify-self-center' size={20} />
                    </div>
                    <span className='text-xs2 pt-1'>موجودی کیف پول</span>
                    <span className='text-xs font-medium mt-1'>140,000,000 ریال</span>
                    <span className='text-xs2 text-red-600 mt-0.5 bg-red-100 w-min px-1 py-px items-center justify-between rounded-md flex'>
                        <ArrowDownLeft size={10} className='stroke-red-600' />
                        <div className="mt-0.5">30%</div>
                    </span>
                </div>
            </div>

            <div className='w-full h-full bg-white rounded-3xl mt-0'>
                <DataTableDemo />
            </div>
        </section>
    )
}

export default TransactionsReviewIndex