/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/no-unused-vars */
'use client'
import React, { useState } from 'react'
import styles from './plans.module.scss'
import PlanItem from '../PlanItem'
import PageIntro from '../PageIntro'
import NoResults from '../NoResults'

interface PlansProps {
  plans: any
}

const Plans: React.FC<PlansProps> = ({ plans }) => {
  const [toggleActive, setToggleActive] = useState<number>(1)

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

  console.log("Returned plans", plans)

  return (
    <div className={styles['plans']}>
      <PageIntro
        title="Get a share of the pie too!"
        description="See our investments and savings plan with high ROI"
      />

      {/* ✅ Uncomment if you want tab switching between categories */}
      {/* 
      <div className={styles['plans__tab']}>
        <div
          onClick={() => toggleActiveState(1)}
          className={
            toggleActive === 1
              ? styles['plans__tab--item--active']
              : styles['plans__tab--item']
          }
        >
          Investments
        </div>

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

      <div className={styles['plans__grid']}>
        {plans?.data?.length > 0 ? (
          plans?.data?.map((plan: any) => <PlanItem key={plan.id} plan={plan} />)
        ) : (
          <NoResults
            title="No Records"
            description="Oops! It seems there are no investment plans now"
          />
        )}
      </div>
    </div>
  )
}

export default Plans