/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from './recent-transactions.module.scss'
import TransactionCard from '../TransactionCard'
import { Link } from '@inertiajs/react'
import PageIntro from '../PageIntro'
import NoResults from '../NoResults'

const RecentTransactions = ({ transactions }: any) => {
  const hasTransactions = transactions?.data?.length > 0
  const firstTenTransactions = transactions?.data?.slice(0, 5) || [];

  return (
    <div className={styles['recent__transactions']}>
      <PageIntro 
        title="Recent Transactions" 
        description="View your recent transactions today" 
      />
      <div className={styles['recent__transactions__transactions']}>
        {hasTransactions  && firstTenTransactions ? (
          <>
            {firstTenTransactions?.map((transaction : any) => (
              <TransactionCard key={transaction.id} transaction={transaction} />
            ))}
            <br />
            <Link href="/dashboard/wallet">See all transactions</Link>
          </>
        ) : (
          <NoResults 
            title="No Transactions" 
            description="Oops, it seems you are yet to carry out any transactions" 
          />
        )}
      </div>
    </div>
  )
}

export default RecentTransactions