"use client";

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

import { IoWallet } from "react-icons/io5";
import { MdGroups } from "react-icons/md";
import { FaProjectDiagram } from "react-icons/fa";

interface cardProps {
  title: any;
  value?: number;
  type: string;
  description: string;
  count?: number;

  // 🔥 new
  trend?: number; // e.g +12 or -5
}

const AnalyticsCard: React.FC<cardProps> = ({
  title,
  value,
  description,
  count,
}) => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 900);
    return () => clearTimeout(timer);
  }, []);

  const renderIcon = () => {
    if (value !== undefined) return <IoWallet />;
    if (
      title.toLowerCase().includes("staff") ||
      title.toLowerCase().includes("members") ||
      title.toLowerCase().includes("count")
    )
      return <MdGroups />;
    return <FaProjectDiagram />;
  };

  if (loading) {
    return (
      <div className={`${styles.card} ${styles.skeleton}`}>
        <div className={styles.skeletonTop}></div>
        <div className={styles.skeletonValue}></div>
        <div className={styles.skeletonBottom}></div>
      </div>
    );
  }

  return (
    <div className={styles.card}>
      {/* TOP */}
      <div className={styles.top}>
        <div className={styles.label}>{title}</div>
        <div className={styles.icon}>{renderIcon()}</div>
      </div>

      {/* VALUE */}
      <div className={styles.valueRow}>
        <h2>
          {value !== undefined
            ? `₦${Number(value).toLocaleString()}`
            : Number(count || 0).toLocaleString()}
        </h2>

      </div>

      {/* DESCRIPTION */}
      <p className={styles.description}>{description}</p>
    </div>
  );
};

export default AnalyticsCard;