"use client";

import { useState } from "react";

type FactorioIconProps = {
  src: string;
  alt: string;
  size?: "sm" | "md" | "lg" | "xl";
  className?: string;
};

const sizes = {
  sm: "size-5",
  md: "size-7",
  lg: "size-10",
  xl: "size-16",
};

export function FactorioIcon({ src, alt, size = "md", className = "" }: FactorioIconProps) {
  const [failed, setFailed] = useState(false);
  if (failed) {
    return (
      <span
        aria-hidden="true"
        className={`${sizes[size]} inline-flex shrink-0 items-center justify-center rounded bg-white/5 font-mono text-[10px] text-zinc-500 ${className}`}
      >
        ?
      </span>
    );
  }
  return (
    // In-game prototype icons are local static assets and intentionally retain pixel edges.
    <img
      src={src}
      alt={alt}
      className={`${sizes[size]} shrink-0 object-contain drop-shadow-[0_2px_2px_rgba(0,0,0,0.55)] ${className}`}
      onError={() => setFailed(true)}
    />
  );
}
