// One item's picture, when this site holds one (docs/link/v8.md §5, §11 — phase 5).
//
// `art` is a FILENAME under uploads/items/, never a path or a URL — the same
// shape `CreaturePortrait` takes, so there is one place in this module that knows
// where uploads are mounted rather than one per surface.
//
// **NULL is ordinary and permanent for some items, and this renders nothing for
// it.** Three separate reasons an item has no picture, and none of them is a
// fault: the site has no shard link and never fetched one; the warm pass has not
// reached this key yet (pictures are fetched behind the page, never by it, so a
// new listing shows text first and gains its icon a few minutes later); or the
// operator's own client simply has no art at that id — 9,963 of a stock client's
// static ids have an empty index entry. Every layout using this is written to sit
// correctly with the icon absent, because that is the state all of them were
// built in.
//
// A hued item is a DIFFERENT picture, not a tinted one: the shard applies the hue
// out of `hues.mul` before it sends anything, because whether a hue repaints the
// whole sprite or only its grey pixels is decided by a flag in `tiledata.mul`
// that this browser has no way to read. So there is nothing to style here — the
// bytes already are the right colour.
//
// `imageRendering: 'pixelated'` for the same reason the creature portraits use
// it: UO art is pixel art, and a browser's default smoothing turns a 22×26
// item into a smear at any size above its own.
export default function ItemIcon({ art, name, size = 32 }) {
  if (!art) return null

  return (
    <img
      src={`/uploads/items/${encodeURIComponent(art)}`}
      alt=""
      // Decorative: the item's name is already beside it as text, and an alt
      // repeating it would make a screen reader say it twice.
      aria-hidden="true"
      loading="lazy"
      style={{
        width: size,
        height: size,
        flex: 'none',
        objectFit: 'contain',
        imageRendering: 'pixelated',
      }}
      title={name}
    />
  )
}