// BEGIN CHANGE: monster portrait - outfit or item sprite (typeex)
"use client";

import { Outfit } from "@/components/Outfit";
import { ItemIcon } from "@/components/ItemIcon";
import { type Look, type OutfitSizeKey } from "@/lib/api";

export type MonsterLook = Look & { looktypeex?: number };

const ITEM_PX: Record<OutfitSizeKey, number> = {
  inline: 28,
  row: 40,
  grid: 48,
  profile: 64,
};

export function MonsterPortrait({
  look,
  size,
  alt,
}: {
  look: MonsterLook;
  size: OutfitSizeKey;
  alt: string;
}) {
  if (look.looktype > 0) {
    return <Outfit look={look} size={size} alt={alt} />;
  }
  const typeex = look.looktypeex ?? 0;
  if (typeex > 0) {
    return <ItemIcon id={typeex} size={ITEM_PX[size]} alt={alt} pixelated />;
  }
  return null;
}
// END CHANGE