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

interface PaymentSummaryProps {
  handleModalClose: any;
  transaction: any;
}

const PaymentSummary = ({ handleModalClose, transaction }: PaymentSummaryProps) => {
  const { type, paymentMethod, currency, cryptocurrency, totalAmount } = transaction
  return (
    <div className={styles['dash__modal']}>
      <div className={styles['dash__modal__content']}>
        <div onClick={handleModalClose} className={styles['dash__modal__content--close']}>
          Close
        </div>
        <div className={styles['dash__modal__content--details']}>
          <div className={styles['dash__modal__content--details--header']}>
            <div className={styles['dash__modal__content--details--header--helper']}>
              {type} Payment Method{' '}
            </div>
            <h2>Transaction Summary</h2>
            <p>
              This is the summary of the transaction you are about to carry out. Please confirm
              before you continue
            </p>
          </div>
          <div className={styles['dash__modal__content--details--transaction']}>
            <h6>Transaction Type:&nbsp; Deposit</h6>
            <h6>
              Payment Method:&nbsp; <span>{paymentMethod}</span>
            </h6>
            {type === 'fiat' ? (
              <h6>Currency:&nbsp; {currency}</h6>
            ) : (
              <h6>Crypto:&nbsp; {cryptocurrency}</h6>
            )}
            <h6 style={{ marginBottom: '.4rem' }}>
              Amount:&nbsp; {Number(totalAmount).toLocaleString('en-US')}
            </h6>
            {type === 'fiat' ? (
              <small>
                {' '}
                An equivalent of {Number(totalAmount).toLocaleString('en-US')} {currency} will be
                converted to BTC to fund your traderplus wallet.
              </small>
            ) : (
              <small>
                {' '}
                An equivalent of {totalAmount} {cryptocurrency} will be funded to your traderplus
                wallet once transaction is successful.
              </small>
            )}
          </div>
          <div className={styles['dash__modal__content--details--instruction']}>
            {type === 'fiat' ? (
              <p>
                <strong>Instruction</strong> <br /> We only support crypto option for deposits at
                the moment. Please contact your account manager for payment details, pay and send a
                screenshot of your receipt to customer care
              </p>
            ) : (
              <p>
                <strong>Instruction</strong> <br />
                You are almost there. Please contact your account manager for payment details, pay
                and send a screenshot of your receipt to customer care
              </p>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}

export default PaymentSummary