/**
 * 头像的轻量显示降级：指定URL加载失败时用名字首段的大写表示，新的URL可重新尝试。
 * 失败标记仅属当前组件，不写用户资料，也不把一次图片失败当成账户失效。
 */
"use client";

import { useState } from "react";
import styles from "./workspace.module.css";

/** 只记住最近一次失败URL；large仅控制尺寸，图片不发送Referrer，alt保留用户身份文本。
 * 换 URL 可以再试，若之后回到较早失败的 URL 也可能重试；不是永久失败地址集合。 */
export function UserAvatar({ name, url, large = false }: {
  name: string;
  url?: string | null;
  large?: boolean;
}) {
  const [failedUrl, setFailedUrl] = useState<string | null>(null);
  // fallback 用 slice(0,1) 取首个 UTF-16 代码单元，并非完整 Unicode 字素；空名字得到空占位。
  const showImage = Boolean(url && url !== failedUrl);
  return (
    <span className={`${styles.avatar} ${large ? styles.avatarLarge : ""}`}>
      {showImage ? (
        <img src={url!} alt={`${name}的头像`} width={large ? 36 : 24} height={large ? 36 : 24}
          referrerPolicy="no-referrer" onError={() => setFailedUrl(url!)} />
      ) : <span aria-hidden="true">{name.slice(0, 1).toUpperCase()}</span>}
    </span>
  );
}