"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((topic: TopicItem) => {
          const content = (
            <>
              <span className={styles.topicIcon}>{topic.icon}</span>
              <span className={styles.topicTitle}>{topic.title}</span>
              <span className={styles.topicDesc}>{topic.desc}</span>
            </>
          );

          return (
            <Link
              key={topic.id}
              href={topic.href}
              className={styles.topicCard}
              target={topic.href.startsWith("http") ? "_blank" : undefined}
              rel={topic.href.startsWith("http") ? "noopener noreferrer" : undefined}
            >
              {content}
            </Link>
          );
        })}
      </div>
    </section>
  );
}