/* eslint-disable @typescript-eslint/no-explicit-any */

// Converted to TypeScript (.tsx) — automated heuristic conversion

import styles from './modal.module.scss'

interface PurchaseSignalProps {
  closeModal: any;
  signal: any;
}

const PurchaseSignal = ({ closeModal, signal }: PurchaseSignalProps) => {
  const { name, price, percentage } = signal
  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']}>
              Purchase signals
            </div>
            <h2>Signal Confirmation Prompt</h2>
            <p>
              This is the summary of the signal you are about to purchase. Please confirm before you
              continue
            </p>
          </div>
          <div className={styles['dash__modal__content--details--transaction']}>
            <h6>Transaction Type:&nbsp; Signal Purchase</h6>
            <h6>
              Payment Source:&nbsp; <span>Wallet Balance</span>
            </h6>
            <h6 style={{ marginBottom: '.4rem' }}>Signal Name:&nbsp; {name}</h6>
            <h6 style={{ marginBottom: '.4rem' }}>Win Percentage&nbsp; {percentage}%</h6>
            <h6 style={{ marginBottom: '.4rem' }}>
              Amount:&nbsp; ${Number(price).toLocaleString('en-US')}
            </h6>
            <small>
              {' '}
              An equivalent of ${Number(price).toLocaleString('en-US')} will be deducted from your
              traderplus wallet to carry out this transaction.
            </small>
          </div>
          <div className={styles['dash__modal__content--details--btn']}>
            <button>Confirm and Proceed</button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default PurchaseSignal