/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from './admin-single-tns.module.scss'

const AdminSingleTransaction = ({ transaction }: any) => {
  const { type, amount, date } = transaction
  return (
    <div className={styles['single__tns']}>
      <div className={styles['single__tns--left']}>
        <div
          className={
            type === 'credit'
              ? styles['single__tns--left--credit']
              : styles['single__tns--left--debit']
          }
        >
          {type === 'credit' ? 'CR' : 'DB'}
        </div>
        <div className={styles['single__tns--left--text']}>
          <h3>{type === 'credit' ? 'Account Credited' : 'Account Debited'}</h3>
          <p>{date}</p>
        </div>
      </div>
      <div className={styles['single__tns--right']}>
        <h3
          className={
            type === 'credit'
              ? styles['single__tns--right--credit']
              : styles['single__tns--right--debit']
          }
        >
          ${Number(amount).toLocaleString('en-US')}
        </h3>
      </div>
    </div>
  )
}

export default AdminSingleTransaction