"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: "视频" },
] as const;

export function UnlockedStats() {
  return (
    <section className={styles.section}>
      <h2 className={styles.sectionTitle}>已解锁</h2>
      <div
        className={`${styles.statsGrid4} animate__animated animate__fadeInUp`}
        style={{ animationDelay: "0.2s", animationFillMode: "both" }}
      >
        {STAT_ITEMS.map(({ key, label }) => {
          const value = String(ASSET_STATS[key as keyof typeof ASSET_STATS]);
          return (
            <div key={key} className={styles.card} style={{ textAlign: "center" }}>
              <div className={styles.bigNumber}>{value}</div>
              <div className={styles.bigNumberLabel}>{label}</div>
            </div>
          );
        })}
      </div>
    </section>
  );
}