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


import styles from './analytics-card.module.scss'
import { IoWallet } from 'react-icons/io5'
import { formatMoneyComplete } from "../../../lib/utils/format-money"
import { useState, useEffect } from 'react'
import { usePage } from '@inertiajs/react'
import currencyData from "../../../../data/countries-currencies.json";

interface AnalyticsCardProps {
  title: any;
  value: any;
  type: any;
  description: any;
}

const AnalyticsCard = ({ title, value, type, description }: AnalyticsCardProps) => {
  const [loading, setLoading] = useState(true)
  const { appSettings } = usePage().props as any;

  const currency = currencyData.find(
    (item) => item.currency_code === appSettings?.base_currency
  )

  useEffect(() => {
    const timeout = setTimeout(() => setLoading(false), 3000)
    return () => clearTimeout(timeout)
  }, [])

  if (loading) {
    return (
      <div
        className={
          type === 'save'
            ? styles['analytics__card--save']
            : type === 'invest'
              ? styles['analytics__card--invest']
              : type === 'balance'
                ? styles['analytics__card']
                : styles['analytics__card--save']
        }
      >
        <div className={styles['skeleton__thumbnail']}></div>
        <div className={styles['skeleton__top']}>
          <div className={styles['skeleton__title']}></div>
          <div className={styles['skeleton__icon']}></div>
          <div className={styles['skeleton__desc']}></div>
        </div>
        <div className={styles['skeleton__bottom']}></div>
      </div>
    )
  }

  return (
    <div
      className={
        type === 'save'
          ? styles['analytics__card--save']
          : type === 'invest'
            ? styles['analytics__card--invest']
            : type === 'balance'
              ? styles['analytics__card']
              : styles['analytics__card--save']
      }
    >
      <div className={styles['analytics__card__thumbnail']}></div>
      <div className={styles['analytics__card__top']}>
        <span>
          <h2>{title}</h2>
          <div className={styles['analytics__card__top--icon']}>
            <IoWallet size="1rem" />
          </div>
        </span>
        <p>{description}</p>
      </div>
      <div className={styles['analytics__card__bottom']}>
        <h3><span style={{ fontSize: ".85rem" }}>{currency?.currency_symbol}</span>&nbsp;{formatMoneyComplete(value)}</h3>
      </div>
    </div>
  )
}

export default AnalyticsCard