"use client";

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

export function WeeklyActions() {
  return (
    <section className={styles.section} style={{ paddingBottom: "2rem" }}>
      <h2 className={styles.sectionTitle}>本周推荐</h2>
      <div
        className="animate__animated animate__fadeInUp"
        style={{ animationDelay: "0.2s", animationFillMode: "both" }}
      >
        {WEEKLY_ACTIONS.map((item) => (
          <Link
            key={item.id}
            href={item.href}
            target={item.href.startsWith("http") ? "_blank" : undefined}
            rel={item.href.startsWith("http") ? "noopener noreferrer" : undefined}
            className={styles.card}
            style={{
              display: "flex",
              alignItems: "center",
              gap: "0.75rem",
              marginBottom: "0.5rem",
              textDecoration: "none",
              color: "inherit",
            }}
          >
            <span
              style={{
                width: "24px",
                height: "24px",
                borderRadius: "50%",
                background: "var(--accent)",
                color: "var(--accent-foreground)",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                fontSize: "0.75rem",
                fontWeight: 600,
              }}
            >
              {item.priority}
            </span>
            <span style={{ color: "var(--foreground)" }}>{item.text}</span>
            <span style={{ marginLeft: "auto", color: "var(--accent)", fontSize: "0.9rem" }}>
              →
            </span>
          </Link>
        ))}
      </div>
    </section>
  );
}