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

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(" ")}>
      <UserMessageAvatar
        avatarUrl={avatarUrl}
        className={styles.avatar}
        size={56}
      />
      <div className={styles.text}>
        <p className={styles.name}>{name}</p>
        <p className={styles.subtitle}>{subtitle}</p>
      </div>
    </div>
  );
}