"use client";

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

export function RecentUpdates() {
  return (
    <section className={styles.section}>
      <h2 className={styles.sectionTitle}>最近更新</h2>
      <div
        className="animate__animated animate__fadeInUp"
        style={{ animationDelay: "0.2s", animationFillMode: "both" }}
      >
        {RECENT_UPDATES.map((item) => {
          const content = (
            <div
              className={styles.card}
              style={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                marginBottom: "0.5rem",
              }}
            >
              <span style={{ color: "var(--foreground)" }}>{item.title}</span>
              <span style={{ fontSize: "0.8rem", color: "var(--muted-foreground)" }}>
                {item.date}
              </span>
            </div>
          );
          if (item.href) {
            return (
              <Link key={item.id} href={item.href} style={{ textDecoration: "none" }}>
                {content}
              </Link>
            );
          }
          return <div key={item.id}>{content}</div>;
        })}
      </div>
    </section>
  );
}