/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from './estate.module.scss'
import property from '../../../../../images/property.png'
// import { useEffect } from 'react'

interface EstateProps {
  estate: any;
  type: any;
  plan: any;
}

const Estate = ({ estate, type, plan }: EstateProps) => {
    const { id, title, amount, returns, investors, isSoldOut } = estate

  interface handleClickProps {
  [key: string]: any;
}

const handleClick = (assetId: handleClickProps) => {
    window.location.href = `/dashboard/opportunities/${assetId}`
  }
  return (
    <div onClick={() => handleClick(id)} className={styles['estate']}>
      <img src={property} alt="Property thumbnail" />
      <div className={styles['estate__details']}>
        <h1>{ title }</h1>
        <small>
          {returns}% p.a expected returns
        </small>
        <div className={styles['estate__details__grid']}>
          <div className={styles['estate__details__grid--item']}>
            <h5>${Number(amount).toLocaleString('en-US')}</h5>
            <small>Per Unit</small>
          </div>
          <div className={styles['estate__details__grid--item']}>
            <h5>{investors}</h5>
            <small>Investors</small>
          </div>
        </div>
        <div
          className={
            isSoldOut ? styles['estate__details__sold'] : styles['estate__details__active']
          }
        >
          {isSoldOut ? 'Sold Out' : 'Active'}
        </div>
      </div>
    </div>
  )
}

export default Estate