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

interface PurchasePlanSummaryProps {
  handleModalClose: any;
  packagePlan: any;
}

const PurchasePlanSummary = ({ handleModalClose, packagePlan }: PurchasePlanSummaryProps) => {
  const { plan, amount } = packagePlan
  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']}>
              Buy investment{' '}
            </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 Source:&nbsp; <span>Wallet Balance</span>
            </h6>
            <h6>Package Name:&nbsp; {plan}</h6>
            <h6>Amount:&nbsp; {Number(amount).toLocaleString('en-US')}</h6>
            <h6>Duration:&nbsp; 4 Days</h6>
            <h6>Returns (%):&nbsp; 20%</h6>
          </div>
          <div className={styles['dash__modal__content--details--instruction']}>
            <p>
              <strong>Instruction</strong> <br /> An equivalent of $
              {Number(amount).toLocaleString('en-US')} will be charged from your wallet. If you have
              inssuficient balance, kindly fund your traderplus wallet.
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}

export default PurchasePlanSummary