import React from "react";
import styles from "./dash-stats-card.module.scss";

interface Stat {
  title: string;
  value: number | string;
  description?: string;
  icon?: React.ReactNode;
  positive?: boolean;
}

interface StatsCardsProps {
  stats: Stat[];
}

const DashStatsCard = ({ stats }: StatsCardsProps) => {
  const formatValue = (value: number | string) => {
    if (typeof value === "number") {
      return value.toLocaleString("en-US");
    }

    if (typeof value === "string" && value.includes("%")) {
      return value;
    }

    const numeric = Number(value);
    if (!isNaN(numeric)) {
      return numeric.toLocaleString("en-US");
    }

    return value;
  };

  return (
    <div className={styles.grid}>
      {stats.map((stat) => (
        <div key={stat.title} className={styles.card}>
          
          {/* HEADER */}
          <div className={styles.cardHeader}>
            {stat.icon && <div className={styles.icon}>{stat.icon}</div>}

            <div className={styles.meta}>
              <h4>{stat.title}</h4>
              {stat.description && <p>{stat.description}</p>}
            </div>
          </div>

          {/* VALUE */}
          <div className={styles.valueSection}>
            <div className={styles.divider} />

            <div className={styles.valueRow}>
              <span
                className={`${styles.dot} ${
                  stat.positive === false
                    ? styles.negativeDot
                    : styles.positiveDot
                }`}
              />

              <h2
                className={
                  stat.positive === false
                    ? styles.negative
                    : styles.positive
                }
              >
                {formatValue(stat.value)}
              </h2>
            </div>
          </div>

        </div>
      ))}
    </div>
  );
};

export default DashStatsCard;