import { resolveUserAvatarData } from "~/lib/avatar-data";
import { cn } from "~/lib/utils";
import { FlagSvg } from "~/components/ui/FlagSvg";
import type { RawFlagConfig } from "~/lib/flag-types";
import { cloudinaryAvatarUrl } from "~/lib/cloudinary-url";

interface UserAvatarProps {
  userId: string;
  name?: string | null;
  email?: string | null;
  customAvatarUrl?: string | null;
  flagConfig?: RawFlagConfig | null;
  avatarType?: string | null;
  size?: "xs" | "sm" | "md" | "lg" | "xl";
  className?: string;
}

const sizeClasses = {
  xs: "h-5 w-5 text-[9px]",
  sm: "h-6 w-6 text-[10px]",
  md: "h-9 w-9 text-sm",
  lg: "h-12 w-12 text-base",
  xl: "h-16 w-16 text-xl",
};

const pixelSizes = {
  xs: 20,
  sm: 24,
  md: 36,
  lg: 48,
  xl: 64,
};

export function UserAvatar({
  userId,
  name,
  email,
  customAvatarUrl,
  flagConfig,
  avatarType,
  size = "md",
  className,
}: UserAvatarProps) {
  const avatar = resolveUserAvatarData({ id: userId, customAvatarUrl, flagConfig, avatarType });
  const label = name ?? email ?? "User avatar";

  if (avatar.type === "image") {
    return (
      <img
        src={cloudinaryAvatarUrl(avatar.url, pixelSizes[size])}
        alt={label}
        className={cn(sizeClasses[size], "object-cover shrink-0", className)}
      />
    );
  }

  return (
    <FlagSvg
      config={avatar.config}
      size={pixelSizes[size]}
      title={label}
      className={cn(sizeClasses[size], className)}
    />
  );
}