import { Display } from '@/components/display';
import { Empty } from '@/components/empty';
import { ProList, ProListActions } from '@/components/pro-list';
import { queryUserBalanceLog } from '@/services/user/user';
import { Card, CardContent } from '@workspace/airo-ui/components/card';
import { formatDate } from '@workspace/airo-ui/utils';
import { useTranslations } from 'next-intl';
import { useRef } from 'react';

const Table: React.FC<{}> = () => {
  const ref = useRef<ProListActions>(null);
  const t = useTranslations('wallet');

  return (
    <ProList<API.UserBalanceLog, Record<string, unknown>>
      action={ref}
      request={async (pagination, filter) => {
        const response = await queryUserBalanceLog({ ...pagination, ...filter });
        return {
          list: response.data.data?.list || [],
          total: response.data.data?.total || 0,
        };
      }}
      renderItem={(item) => {
        return (
          <Card className='rounded-[32px] px-[20px] sm:px-[55px]'>
            <CardContent className='px-0 py-3 text-[10px] sm:p-3 sm:text-sm'>
              <ul className='grid grid-cols-4 gap-3 *:flex *:flex-col'>
                <li className='font-semibold'>
                  <span className='font-normal text-[#225BA9]'>{t('createdAt')}</span>
                  <time className={''}>{formatDate(item.created_at)}</time>
                </li>
                <li className='font-semibold'>
                  <span className='font-normal text-[#225BA9]'>{t('type.0')}</span>
                  <span className={''}>{t(`type.${item.type}`)}</span>
                </li>
                <li className='font-semibold'>
                  <span className='font-normal text-[#225BA9]'>{t('amount')}</span>
                  <span className={''}>
                    <Display type='currency' value={item.amount} />
                  </span>
                </li>

                <li className='font-semibold'>
                  <span className='font-normal text-[#225BA9]'>{t('balance')}</span>
                  <span className={''}>
                    <Display type='currency' value={item.balance} />
                  </span>
                </li>
              </ul>
            </CardContent>
          </Card>
        );
      }}
      empty={<Empty />}
    />
  );
};

export default Table;
