"use client";

import { Image as ImageIcon } from "lucide-react";
import { getHabboCdnIconUrl, getLocalIconUrl } from "@/lib/furni/classname";

export function FurniIcon({ classname, revision }: { classname: string; revision: number }) {
  if (!classname) {
    return (
      <div className="w-10 h-10 rounded bg-muted flex items-center justify-center">
        <ImageIcon className="h-4 w-4 text-muted-foreground" />
      </div>
    );
  }

  const localUrl = getLocalIconUrl(classname);

  function handleError(e: React.SyntheticEvent<HTMLImageElement>) {
    const img = e.target as HTMLImageElement;
    const stage = img.dataset.fallback;
    if (!stage && revision > 0) {
      img.dataset.fallback = "cdn";
      img.src = getHabboCdnIconUrl(classname, revision);
    } else {
      img.dataset.fallback = "none";
      img.style.opacity = "0";
    }
  }

  return (
    <div className="w-10 h-10 rounded bg-muted/50 flex items-center justify-center overflow-hidden">
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src={localUrl}
        alt={classname}
        className="max-w-full max-h-full object-contain"
        style={{ imageRendering: "pixelated" }}
        onError={handleError}
        loading="lazy"
      />
    </div>
  );
}