// BEGIN CHANGE: icone de item (GIF legado em images/items/{id}.gif)
"use client";

import { useEffect, useRef } from "react";
import { itemUrl } from "@/lib/api";

export function ItemIcon({
  id,
  alt = "",
  size = 32,
  pixelated = false,
}: {
  id: number;
  alt?: string;
  size?: number;
  pixelated?: boolean;
}) {
  const ref = useRef<HTMLImageElement | null>(null);

  useEffect(() => {
    if (ref.current) {
      ref.current.style.visibility = "visible";
    }
  }, [id]);

  return (
    // eslint-disable-next-line @next/next/no-img-element
    <img
      ref={ref}
      src={itemUrl(id)}
      alt={alt}
      width={size}
      height={size}
      loading="lazy"
      className="object-contain"
      style={{
        width: size,
        height: size,
        imageRendering: pixelated ? "pixelated" : undefined,
      }}
      onError={(e) => {
        // Item sem GIF no legado: esconde o icone quebrado.
        (e.target as HTMLImageElement).style.visibility = "hidden";
      }}
    />
  );
}
// END CHANGE