import { useState } from 'react';
import { staticAssetUrl } from '../../lib/apiBase';
import type { TeamMemberBrief } from '../../types';

interface TeamMemberAvatarProps {
  member: TeamMemberBrief;
  className?: string;
  size?: 'leader' | 'member';
}

export function TeamMemberAvatar({ member, className = '', size = 'member' }: TeamMemberAvatarProps) {
  const [imgError, setImgError] = useState(false);
  const initial = member.name?.charAt(0) ?? '?';
  const isLeader = size === 'leader';

  const photoSrc = staticAssetUrl(member.photoUrl);

  if (photoSrc && !imgError) {
    return (
      <img
        src={photoSrc}
        alt={member.name}
        className={`${isLeader ? 'leader-avatar' : 'member-avatar'} ${className}`}
        onError={() => setImgError(true)}
      />
    );
  }

  return (
    <div className={`${isLeader ? 'leader-avatar' : 'member-avatar'} ${className}`}>
      {initial}
    </div>
  );
}
