"use client";

import Link from "next/link";
import { TOPICS } from "@/app/data/vip.mock";
import styles from "../vip.module.css";

export function TopicCards() {
  return (
    <section className={styles.section}>
      <h2 className={styles.sectionTitle}>模块入口</h2>
      <div
        className={`${styles.topicGrid} animate__animated animate__fadeInUp`}
        style={{ animationDelay: "0.2s", animationFillMode: "both" }}
      >
        {TOPICS.map((t) => {
          const content = (
            <>
              <span className={styles.topicIcon}>{t.icon}</span>
              <span className={styles.topicTitle}>{t.title}</span>
              <span className={styles.topicDesc}>{t.desc}</span>
            </>
          );
          if (t.href) {
            return (
              <Link
                key={t.id}
                href={t.href}
                className={styles.topicCard}
                target={t.href.startsWith("http") ? "_blank" : undefined}
                rel={t.href.startsWith("http") ? "noopener noreferrer" : undefined}
              >
                {content}
              </Link>
            );
          }
          return (
            <div key={t.id} className={styles.topicCard} style={{ cursor: "default", opacity: 0.7 }}>
              {content}
            </div>
          );
        })}
      </div>
    </section>
  );
}