'use client';
import React from 'react'
import { useGetTransactions } from './hooks/useTransactionData';
import { TransactionsTable } from './components/TransactionsTable';
import LoadingOverlay from '@/components/overlays/LoadingOverlay';
import { glassSurfaceCard } from '@/lib/styles/glassSurface';

function TransactionsReviewIndex() {
  const { data: transactionsResponse, isLoading: isLoadingTransactions } = useGetTransactions();

  const transactions = transactionsResponse?.data || [];

  const isLoading = isLoadingTransactions;

  return (
    <section className='flex flex-col h-full pb-10 pt-6 gap-4 relative'>
      {isLoading && <LoadingOverlay />}

      <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 dark:stroke-neutral-200'
              size={20}
            />
          </div>
          <span className='text-xs2 pt-1'>مجموع واریز ها</span>
          <span className='text-xs font-medium mt-1 mb-0.5'>
            {formatPrice(stats.totalDeposits)} ریال
          </span>
        </div>
        <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'>
            <MoneyRecive
              className='stroke-primary justify-self-center dark:stroke-neutral-200'
              size={20}
            />
          </div>
          <span className='text-xs2 pt-1'>مجموع برداشت ها</span>
          <span className='text-xs font-medium mt-1 mb-0.5'>
            {formatPrice(stats.totalWithdrawals)} ریال
          </span>
        </div>
        <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'>
            <Wallet
              className='stroke-primary justify-self-center dark:stroke-neutral-200'
              size={20}
            />
          </div>
          <span className='text-xs2 pt-1'>موجودی کیف پول</span>
          <span className='text-xs font-medium mt-1 mb-0.5'>
            {formatPrice(walletAmount)} ریال
          </span>
        </div>
      </div> */}

      <div className={glassSurfaceCard('w-full h-full mt-0 rounded-3xl')}>
        <TransactionsTable transactions={transactions} />
      </div>
    </section>
  )
}

export default TransactionsReviewIndex