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

const TradeDetails = ({ handleModalClose, trade }: any) => {
  const { type, pair, amount, leverage, duration, returnPercentage, win, status } = trade
  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} Details{' '}
            </div>
            <h2>Transaction Summary</h2>
            <p>
              This is the summary of the selected trading executed on your trading account with
              tradeplus.
            </p>
          </div>
          <div className={styles['dash__modal__content--details--transaction']}>
            <h6>Transaction Type:&nbsp; Trading</h6>
            <h6>
              Payment Method:&nbsp; <span>Wallet Balance</span>
            </h6>
            <h6>Trade Status:&nbsp; {status}</h6>
            <h6>Assets Traded:&nbsp; {pair}</h6>
            <h6>Leverage:&nbsp; {leverage}</h6>
            <h6>Duration:&nbsp; {duration}</h6>
            <h6>
              Trade Won:&nbsp;{' '}
              <span
                className={
                  win
                    ? styles['dash__modal__content--details--transaction--win']
                    : styles['dash__modal__content--details--transaction--loss']
                }
              >
                {win ? 'True' : 'False'}
              </span>
            </h6>
            <h6>
              Return Percentage:&nbsp;{' '}
              <span
                className={
                  win
                    ? styles['dash__modal__content--details--transaction--win']
                    : styles['dash__modal__content--details--transaction--loss']
                }
              >
                {win ? `+${returnPercentage}%` : `-${returnPercentage}%`}
              </span>
            </h6>
            <h6 style={{ marginBottom: '.4rem' }}>
              Amount:&nbsp; ${Number(amount).toLocaleString('en-US')}
            </h6>
            <small>
              An equivalent of ${Number(amount).toLocaleString('en-US')} was deducted from your
              wallet balance to execute this trade
            </small>
          </div>
          <div className={styles['dash__modal__content--details--instruction']}>
            <p>
              <strong>Instruction</strong> <br />
              Thank you for trading with us. For any inquiries or issues, please contact
              support@traderplus.com for fast resolution.
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}

export default TradeDetails