/* eslint-disable @typescript-eslint/no-explicit-any */


import styles from './analytics-card-wrapper.module.scss'
import AnalyticsCard from '../AnalyticsCard'
import PageIntro from '../PageIntro'
import { usePage } from '@inertiajs/react'

const AnalyticsCardWrapper = () => {
  const { auth } = usePage().props as unknown as any;
  return (
    <div className={styles['analytics']}>
      <PageIntro
        title="Portfolio Overview"
        description="Quickly see your portfolio performance today at a glance"
      />

      <div className={styles['analytics__grid']}>
        <AnalyticsCard
          title="Accont Balance"
          description="Total deposits and earned profits."
          value={auth?.user?.balance}
          type="balance"
        />
        <AnalyticsCard
          title="Total Deposits"
          description="All processed deposits made"
          value={auth?.user?.total_deposits}
          type="invest"
        />
        <AnalyticsCard
          title="Total Profits"
          description="Total accumulated trading profit"
          value={auth?.user?.total_profits}
          type="save"
        />
        <AnalyticsCard
          title="Total Withdrawals"
          description="All processed withdrawals"
          value={auth?.user?.total_withdrawals}
          type="withdrawal"
        />
      </div>
    </div>
  )
}

export default AnalyticsCardWrapper