/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable @typescript-eslint/no-explicit-any */
"use client"

import { useEffect } from "react"
import styles from "./portfolio.module.scss"
import NoData from "../NoData"
import TradePortfolioItem from "./TradePortfolioItem"
import Pagination from "@/components/shared/Pagination"
import { usePaginatedData } from "@/hooks/use-paginated-data"

const TradePortfolio = ({ portfolios }: any) => {

   const {
      loading: isLoading,
      setLoading,
      handlePageChange,
    } = usePaginatedData(10);

  useEffect(() => {
    const timer = setTimeout(() => {
      setLoading(false)
    }, 3000)

    return () => clearTimeout(timer)
  }, [])

  return (
    <>
    <div className={styles.portfolio}>
      <div className={styles.portfolio__content}>
        {/* Table Header */}
        <div className={styles.portfolio__content__table}>
          <span>Package</span>
          <span>Amount</span>
          <span>Returns (%)</span>
          <span>Start Date</span>
          <span>End Date</span>
          <span>Status</span>
        </div>

        {/* Table Body */}
        <div className={styles.portfolio__content__children}>
          {isLoading ? (
            <>
              {Array.from({ length: 4 }).map((_, idx) => (
                <div
                  key={idx}
                  className={styles.skeletonRow}
                >
                  {Array.from({ length: 6 }).map((__, i) => (
                    <div key={i} className={styles.skeletonCell} />
                  ))}
                </div>
              ))}
            </>
          ) : portfolios?.data?.length > 0 ? (
            portfolios?.data?.map((portfolio: any) => (
              <TradePortfolioItem
                key={portfolio.id}
                portfolio={portfolio}
              />
            ))
          ) : (
            <NoData
              title="Oops! No Record Found"
              description="Hey there, it seems you are yet to subscribe to any of our investment plans."
              path="dashboard/plans"
              label="Invest Now"
            />
          )}
        </div>
      </div>
    </div>
      <div className={styles["attend__pagination"]}>
      {portfolios?.data?.length > 0 && portfolios?.links?.length > 0 && (
        <Pagination links={portfolios?.links} onChange={handlePageChange} />
      )}
  </div>
  </>
  )
}

export default TradePortfolio