import React, { useState } from 'react';
import './Avatar.css';

/* 头像（移动端）— 规格 §23
   文字头像用 role="img" + aria-label（读屏读「姓名 头像」）；图片头像的语义由 <img alt> 承担，
   加载失败只回传一次 error 事件并把内容退回文字（状态 fallback），宿主决定要不要换资源。 */
export default function Avatar({
  size = 'default',
  shape = 'circle',
  type = 'text',
  src = '',
  alt = '',
  disabled = false,
  onError,
  children = null,
  badge = null,
}) {
  const [failed, setFailed] = useState(false);
  const showImage = type === 'image' && !!src && !failed;
  const fallback = type === 'image' && failed;

  const cls =
    'kole-m-avatar' +
    ` kole-m-avatar--${size}` +
    ` kole-m-avatar--${shape}` +
    (fallback ? ' is-fallback' : '') +
    (disabled ? ' is-disabled' : '');

  function handleError(e) {
    setFailed(true);
    if (onError) onError(e);
  }

  return (
    <span
      className={cls}
      role={showImage ? undefined : 'img'}
      aria-label={showImage ? undefined : alt || undefined}
      aria-disabled={disabled ? 'true' : undefined}
    >
      {showImage ? (
        <img className="kole-m-avatar__image" src={src} alt={alt} onError={handleError} />
      ) : (
        <span className="kole-m-avatar__text">{children}</span>
      )}
      {badge ? (
        <span className="kole-m-avatar__badge" aria-hidden="true">
          {badge}
        </span>
      ) : null}
    </span>
  );
}