/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useEffect, useState } from "react";
import styles from "./fin.module.scss";

interface statsProps {
  title: string;
  amount: number;
  icon: any;
}

const FinanceAnalyticsStatCard: React.FC<statsProps> = ({
  title,
  amount,
  icon,
}) => {
  const [loading, setLoading] = useState(true);
  const [animate, setAnimate] = useState(false);

  useEffect(() => {
    // Wait 2 seconds before showing the real content
    const timer = setTimeout(() => {
      setAnimate(true);
      setLoading(false);
    }, 2000);

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

  if (loading) {
    return (
      <div className={styles.skeleton}>
        <div className={styles.shimmer}></div>

        <div className={styles["skeleton__top"]}>
          <div className="left">
            <div className={`${styles.skeleton__block} ${styles.title}`}></div>
            <div className={`${styles.skeleton__block} ${styles.value}`}></div>
          </div>
          <div className={`${styles.skeleton__block} ${styles.icon}`}></div>
        </div>
      </div>
    );
  }

  return (
    <div className={`${styles.stat} ${animate ? styles["fade-enter-active"] : styles["fade-enter"]}`}>
      <div className={styles["stat__top"]}>
        <div>
          <h2>{title}</h2>
          <h1>₦{Number(amount).toLocaleString("en-US")}</h1>
        </div>
        <div>
             <span>{icon}</span>
        </div>
      </div>
    </div>
  );
};

export default FinanceAnalyticsStatCard;