"use client";
/**
 * 订阅权益卡片
 *
 * 视觉规格（与设计稿对齐）：
 *   - 白色卡片，--radius-xl 圆角
 *   - 顶部粉色渐变条：居中白色标题
 *   - 主体：1./2./3./4. 编号列表
 *   - 行间细分隔线
 */
import styles from "./subscription-benefits-card.module.css";

export interface SubscriptionBenefitsCardProps {
  title: string;
  items: readonly string[];
  className?: string;
}

export function SubscriptionBenefitsCard({
  title,
  items,
  className,
}: SubscriptionBenefitsCardProps) {
  return (
    <section
      className={[styles.card, className].filter(Boolean).join(" ")}
    >
      <header className={styles.header}>
        <h2 className={styles.title}>{title}</h2>
      </header>
      <ol className={styles.list}>
        {items.map((item, idx) => (
          <li key={idx} className={styles.item}>
            <span className={styles.numeral}>{idx + 1}.</span>
            <span className={styles.text}>{item}</span>
          </li>
        ))}
      </ol>
    </section>
  );
}