'use client';

import { useState } from 'react';
import { cn, resolveUploadUrl } from '@/lib/utils';

interface AvatarProps {
  src?: string | null;
  name?: string | null;
  size?: number;
  className?: string;
}

/**
 * 头像组件：有 src 显示图片（onError 兜底），否则显示首字符圆形。
 */
export function Avatar({ src, name, size = 32, className }: AvatarProps) {
  const [imgError, setImgError] = useState(false);
  const showImg = Boolean(src) && !imgError;
  const initial = (name?.trim()?.charAt(0) ?? '?').toUpperCase();
  const fontSize = Math.max(12, Math.round(size * 0.45));

  if (showImg) {
    return (
      // eslint-disable-next-line @next/next/no-img-element
      <img
        src={resolveUploadUrl(src ?? '')}
        alt={name ?? 'avatar'}
        onError={() => setImgError(true)}
        style={{ width: size, height: size }}
        className={cn('rounded-full object-cover', className)}
      />
    );
  }

  return (
    <div
      style={{ width: size, height: size, fontSize }}
      className={cn(
        'flex shrink-0 items-center justify-center rounded-full bg-brand-600 font-medium text-white',
        className,
      )}
    >
      {initial}
    </div>
  );
}