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

interface ConfirmTradeProps {
  closeModal: any;
  trade: any;
}

const ConfirmTrade = ({ closeModal, trade }: ConfirmTradeProps) => {
  const { type, assetClass, asset, amount, leverage, expiration } = trade
  return (
    <div className={styles['dash__modal']}>
      <div className={styles['dash__modal__content']}>
        <div onClick={closeModal} 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']}>
              Trade Summary - {type}
            </div>
            <h2>Trade Confirmation Prompt</h2>
            <p>
              This is the summary of the trade 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; {type} Trading</h6>
            <h6>
              Payment Method:&nbsp; <span>Account Balance</span>
            </h6>
            <h6 style={{ marginBottom: '.4rem' }}>Asset Trading Class:&nbsp; {assetClass}</h6>
            <h6 style={{ marginBottom: '.4rem' }}>Trading Leverage Class:&nbsp; {leverage}</h6>
            <h6 style={{ marginBottom: '.4rem' }}>Asset(s) Traded:&nbsp; {asset}</h6>
            <h6 style={{ marginBottom: '.4rem' }}>Trading Duration:&nbsp; {expiration}</h6>
            <h6 style={{ marginBottom: '.4rem' }}>
              Amount:&nbsp; ${Number(amount).toLocaleString('en-US')}
            </h6>
            <small>
              {' '}
              An equivalent of ${Number(amount).toLocaleString('en-US')} will be deducted from your
              traderplus wallet to carry out this trade
            </small>
          </div>
          <div className={styles['dash__modal__content--details--btn']}>
            <button>Confirm and Trade</button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default ConfirmTrade