"use client";

import { VIP_BENEFITS } from "@/data/constants/vip-benefits";

import type { SidebarUserState } from "./user-header";
import styles from "./vip-benefits-card.module.css";

export interface VipBenefitsCardProps {
  state: SidebarUserState;
  onActivate: () => void;
}

/**
 * VIP Membership Benefits 卡片
 *
 * 视觉规格（与设计稿对齐）：
 *   - 白色卡片 + 粉色→品红渐变描边
 *   - 标题粉色加粗，右上角条件渲染 "Activated" pill（仅 VIP）
 *   - 1./2./3./4. 编号列表
 *   - 底部条件渲染 "Activate VIP Membership" 按钮（非 VIP 时显示）
 *
 * 状态差异：
 *   - guest / member → 无状态 pill + 显示 Activate 按钮
 *   - vip            → 显示 Activated pill + 无按钮
 */
export function VipBenefitsCard({ state, onActivate }: VipBenefitsCardProps) {
  const isVip = state === "vip";

  return (
    <section className={styles.card}>
      <header className={styles.header}>
        <h2 className={styles.title}>VIP Membership Benefits</h2>
        {isVip && (
          <span className={styles.statusPill} aria-label="Activated">
            Activated
          </span>
        )}
      </header>

      <ol className={styles.list}>
        {VIP_BENEFITS.map((item, idx) => (
          <li key={idx} className={styles.item}>
            <span className={styles.numeral}>{idx + 1}.</span>
            <span className={styles.text}>{item}</span>
          </li>
        ))}
      </ol>

      {!isVip && (
        <div className={styles.footer}>
          <button
            type="button"
            className={styles.activateBtn}
            onClick={onActivate}
            aria-label="Activate VIP Membership"
          >
            Activate VIP Membership
          </button>
        </div>
      )}
    </section>
  );
}
