"use client";

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

type TopicItem = (typeof TOPICS)[number];

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: TopicItem) => {
          const { id, href } = t;
          const content = (
            <>
              <span className={styles.topicIcon}>{t.icon}</span>
              <span className={styles.topicTitle}>{t.title}</span>
              <span className={styles.topicDesc}>{t.desc}</span>
            </>
          );
          return href ? (
            <Link
              key={id}
              href={href}
              className={styles.topicCard}
              target={href.startsWith("http") ? "_blank" : undefined}
              rel={href.startsWith("http") ? "noopener noreferrer" : undefined}
            >
              {content}
            </Link>
          ) : (
            <div key={id} className={styles.topicCard} style={{ cursor: "default", opacity: 0.7 }}>
              {content}
            </div>
          );
        })}
      </div>
    </section>
  );
}