"use client";
/**
 * 订阅页用户信息行
 *
 * 视觉规格（与设计稿对齐）：
 *   - 56×56 粉色圆形头像
 *   - 头像右侧两行文本：用户名（16px/600）、副标题（12px/secondary）
 *   - 无头像时显示默认用户图标
 */
import Image from "next/image";

import styles from "./subscription-user-row.module.css";

export interface SubscriptionUserRowProps {
  name: string;
  /** null → 显示默认用户图标 */
  avatarUrl: string | null;
  subtitle?: string;
  className?: string;
}

export function SubscriptionUserRow({
  name,
  avatarUrl,
  subtitle = "VIP membership not activated",
  className,
}: SubscriptionUserRowProps) {
  return (
    <div className={[styles.row, className].filter(Boolean).join(" ")}>
      <div className={styles.avatar} aria-hidden="true">
        {avatarUrl ? (
          <Image
            src={avatarUrl}
            alt=""
            width={56}
            height={56}
            className={styles.avatarImg}
          />
        ) : (
          <svg
            width="28"
            height="28"
            viewBox="0 0 24 24"
            fill="none"
            className={styles.avatarIcon}
          >
            <circle cx="12" cy="8" r="4" fill="currentColor" />
            <path
              d="M4 20c0-4.418 3.582-7 8-7s8 2.582 8 7"
              fill="currentColor"
            />
          </svg>
        )}
      </div>
      <div className={styles.text}>
        <p className={styles.name}>{name}</p>
        <p className={styles.subtitle}>{subtitle}</p>
      </div>
    </div>
  );
}
