import { resolveAvatar } from "@/lib/avatars";

const sizeStyles = {
  xs: "h-4 w-4 text-[10px]",
  sm: "h-5 w-5 text-sm",
  md: "h-8 w-8 text-base",
  lg: "h-11 w-11 text-xl",
  xl: "h-14 w-14 text-2xl",
} as const;

interface UserAvatarProps {
  userId: string;
  profile?: { avatar: string } | null;
  size?: keyof typeof sizeStyles;
  bg?: string;
  className?: string;
}

export default function UserAvatar({
  userId,
  profile,
  size = "md",
  bg,
  className = "",
}: UserAvatarProps) {
  const avatar = resolveAvatar(userId, profile);
  return (
    <span
      className={`inline-flex items-center justify-center rounded-full leading-none ${sizeStyles[size]} ${bg ?? avatar.bg} ${className}`}
    >
      {avatar.emoji}
    </span>
  );
}