/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from './opportunities.module.scss'
import UserDashboardLayout from '@/layouts/user_dashboard_layout'
import PageIntro from '@/components/dashboard/PageIntro'
import { useState } from 'react'
import TradePortfolio from '@/components/dashboard/TradePortfolio'

const Portfolio = ({ portfolios }: any) => {
  
  const [toggleActive, setTogglActive] = useState(1)

  const toggleActiveState = (key: number) => {
    setTogglActive(key)
  }


  return (
    <div className={styles['opportunities']}>
      <PageIntro
        title="Investment Portfolio"
        description="See a complete breakdown of your investment portfolio history with traderplus"
      />

      <div className={styles['opportunities__tab']}>
        <div
          onClick={() => toggleActiveState(1)}
          className={
            toggleActive === 1
              ? styles['opportunities__tab--item--active']
              : styles['opportunities__tab--item']
          }
        >
          My Portfolio
        </div>

        {/* <div
          onClick={() => toggleActiveState(2)}
          className={
            toggleActive === 2
              ? styles['opportunities__tab--item--active']
              : styles['opportunities__tab--item']
          }
        >
         My Properties
        </div> */}
      </div>

      <div className={styles['opportunities__content']}>
        {toggleActive === 1 ? <TradePortfolio portfolios={ portfolios } /> : null}
      </div>
    </div>
  )
}

Portfolio.layout = (page: any) => (
  <UserDashboardLayout children={page} title="Investment Portfolio" />
)

export default Portfolio