/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from './estate-summary.module.scss'
// import { BsArrowDownLeft, BsArrowUpRight } from "react-icons/bs";

interface EstatePortfolioSummaryProps {
  handleModalClose: any;
  portfolio: any;
}

const EstatePortfolioSummary = ({ handleModalClose, portfolio }: EstatePortfolioSummaryProps) => {
  const { amount, units, starts, ends, roi, status } = portfolio

  const returnPercentage = roi / 100
  const totalReturns = (amount * returnPercentage ) + amount
  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']}>
            <h2>Investment Summary</h2>
            <p>If you have any queries, kindly reach out to our customer support team...</p>
          </div>

          <div className={styles['dash__modal__content--details--summary']}>
            <div className={styles['dash__modal__content--details--summary--item']}>
              <h6>Transaction ID</h6>
              <p>8dj3ndjHDk3dk8RCTncQA</p>
            </div>

            <div className={styles['dash__modal__content--details--summary--item']}>
              <h6>Units Bought</h6>
              <p>{ units }</p>
            </div>

            <div className={styles['dash__modal__content--details--summary--item']}>
              <h6>Asset Class</h6>
              <p>Real Estate</p>
            </div>

            <div className={styles['dash__modal__content--details--summary--item']}>
              <h6>Status</h6>
              <span className={ status === "completed" ? styles['dash__modal__content--details--summary--item--credit-type'] : styles['dash__modal__content--details--summary--item--debit-type'] }>{ status === "completed" ? "Completed" : "On-going" }</span>
            </div>

            <div className={styles['dash__modal__content--details--summary--item']}>
              <h6>Amount Invested</h6>
              <p>${ Number(amount).toLocaleString("en-US") }</p>
            </div>

            <div className={styles['dash__modal__content--details--summary--item']}>
              <h6>ROI (%)</h6>
              <p>{ roi }%</p>
            </div>

            <div className={styles['dash__modal__content--details--summary--item']}>
              <h6>Returns Plus Principal</h6>
              <p>${ totalReturns.toLocaleString("en-US") }</p>
            </div>

            <div className={styles['dash__modal__content--details--summary--item']}>
              <h6>Starts</h6>
              <p>{ starts }</p>
            </div>

            <div className={styles['dash__modal__content--details--summary--item']}>
              <h6>Ends</h6>
              <p>{ ends }</p>
            </div>
          </div>

          {/* <div className={styles['dash__modal__content--details--instruction']}>
              <p>
                <strong>Note *</strong> <br /><hr /> When your investment matures, you will be notified so you can withdraw or reinvest as you may wish.
              </p>
          </div> */}
        </div>
      </div>
    </div>
  )
}

export default EstatePortfolioSummary