const SIZE_CLASSES = {
  sm: "h-8 w-8 text-xs",
  md: "h-12 w-12 text-sm",
  lg: "h-16 w-16 text-lg",
  xl: "h-32 w-32 text-3xl",
} as const;

export function Avatar({
  username,
  avatarUrl,
  size = "md",
}: {
  username: string;
  avatarUrl?: string | null;
  size?: keyof typeof SIZE_CLASSES;
}) {
  const sizeClass = SIZE_CLASSES[size];

  if (avatarUrl) {
    return (
      // eslint-disable-next-line @next/next/no-img-element
      <img
        src={avatarUrl}
        alt={username}
        className={`${sizeClass} rounded-full object-cover`}
      />
    );
  }

  const initial = username.charAt(0).toUpperCase();
  return (
    <div
      className={`${sizeClass} flex items-center justify-center rounded-full bg-terracotta/10 font-heading font-semibold text-terracotta`}
      aria-hidden="true"
    >
      {initial}
    </div>
  );
}