/**
 * Аватар пользователя — переиспользуемый `.avatar` (DESIGN_SYSTEM.md §1.5):
 * фото, если загружено (`avatarUrl`), иначе заглушка с инициалами имени.
 * Используется в топбаре, таблице «Пользователи» админки, пикере участников
 * конференции и ховер-карточке.
 */
interface AvatarProps {
  name: string
  avatarUrl?: string | null
  /** Размер в пикселях — по умолчанию 28px, как базовый `.avatar` в shell.css. */
  size?: number
  className?: string
}

function initialsOf(name: string): string {
  const parts = name.trim().split(/\s+/).filter(Boolean)
  if (parts.length === 0) return '??'
  return parts
    .slice(0, 2)
    .map((p) => p[0]?.toUpperCase())
    .join('')
}

export function Avatar({ name, avatarUrl, size, className }: AvatarProps) {
  const style = size ? { width: size, height: size } : undefined
  return (
    <span className={`avatar${className ? ` ${className}` : ''}`} style={style} aria-hidden="true">
      {avatarUrl ? <img src={avatarUrl} alt="" /> : initialsOf(name)}
    </span>
  )
}
