export function UserAvatar({ src, alt, width = 120, height = 120, className }: { src?: string | null; alt?: string; width?: number; height?: number; className?: string }) {
  if (src) {
    return (
      <img 
        src={src} 
        alt={alt || "프로필"} 
        width={width} 
        height={height} 
        className={className || "rounded-full object-cover"}
        style={{ width, height }}
      />
    );
  }

  // 프로필 이미지가 없을 때 표시할 기본 아바타 SVG
  return (
    <div 
      className={className || "rounded-full bg-[#E0E0E0] flex items-center justify-center overflow-hidden"} 
      style={{ width, height }}
    >
      <svg width={width} height={height} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="120" height="120" rx="60" fill="#E0E0E0"/>
        <circle cx="60" cy="40" r="20" fill="white"/>
        <path d="M30 100C30 80 45 70 60 70C75 70 90 80 90 100" fill="white"/>
      </svg>
    </div>
  );
}