"use client";

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

export function CommunityPreview() {
  return (
    <section className={styles.section}>
      <h2 className={styles.sectionTitle}>社区价值</h2>
      <div
        className="animate__animated animate__fadeInUp"
        style={{
          display: "flex",
          flexDirection: "column",
          gap: "0.75rem",
          animationDelay: "0.2s",
          animationFillMode: "both",
        }}
      >
        {COMMUNITY_PREVIEW.map((item, i) => (
          <div
            key={i}
            className={styles.card}
            style={{
              display: "flex",
              alignItems: "center",
              gap: "0.75rem",
            }}
          >
            <span style={{ fontSize: "1.5rem" }}>{item.icon}</span>
            <span style={{ color: "var(--foreground)" }}>{item.text}</span>
          </div>
        ))}
      </div>
    </section>
  );
}