"use client";

import { ASSET_STATS } from "@/app/data/vip.mock";
import styles from "../vip.module.css";

const STAT_ITEMS = [
  { key: "topics", label: "模块" },
  { key: "ebooks", label: "电子书" },
  { key: "videos", label: "视频" },
  { key: "updateFrequency", label: "更新" },
] as const;

export function AssetStats() {
  return (
    <section className={`${styles.section} ${styles.statsSection}`}>
      <div
        className={`${styles.statsGrid} animate__animated animate__fadeInUp`}
        style={{ animationDelay: "0.2s", animationFillMode: "both" }}
      >
        {STAT_ITEMS.map(({ key, label }, i) => {
          const value =
            key === "updateFrequency"
              ? ASSET_STATS[key]
              : String(ASSET_STATS[key as keyof typeof ASSET_STATS]);
          return (
            <div
              key={key}
              className={styles.card}
              style={{
                textAlign: "center",
                animationDelay: `${0.25 + i * 0.05}s`,
                animationFillMode: "both",
              }}
            >
              <div className={styles.bigNumber}>{value}</div>
              <div className={styles.bigNumberLabel}>{label}</div>
            </div>
          );
        })}
      </div>
    </section>
  );
}