"use client";

import Link from "next/link";
import styles from "../vip.module.css";

type WelcomeBlockProps = {
  userName: string | null;
};

function getStorage(key: string): string | null {
  if (typeof window === "undefined") return null;
  return localStorage.getItem(key);
}

export function WelcomeBlock({ userName }: WelcomeBlockProps) {
  const displayName = userName || getStorage("userName") || "会员";
  return (
    <section className={styles.section} style={{ paddingTop: "1.5rem" }}>
      <h1
        className="animate__animated animate__fadeInDown"
        style={{
          fontSize: "clamp(1.5rem, 4vw, 2rem)",
          fontWeight: 600,
          margin: 0,
          animationDelay: "0.1s",
          animationFillMode: "both",
        }}
      >
        欢迎回来，{displayName}
      </h1>
      <p
        className="animate__animated animate__fadeInDown"
        style={{
          fontSize: "0.95rem",
          color: "var(--muted-foreground)",
          margin: "0.25rem 0 0",
          animationDelay: "0.15s",
          animationFillMode: "both",
        }}
      >
        以下是您的会员资产与推荐动作
      </p>
      <Link
        href="https://qun.hackrobot.cn"
        target="_blank"
        rel="noopener noreferrer"
        className={styles.card}
        style={{
          display: "inline-flex",
          alignItems: "center",
          gap: "0.5rem",
          marginTop: "1rem",
          textDecoration: "none",
          color: "var(--accent)",
          fontWeight: 500,
        }}
      >
        🌐 进入星球 qun.hackrobot.cn →
      </Link>
    </section>
  );
}