function StickerArt({ sticker, className = "" }) {
  const [imageFailed, setImageFailed] = useState(false);
  const fallback =
    sticker && sticker.glyph
      ? sticker.glyph
      : sticker && sticker.id === "none"
        ? "—"
        : "*";
  if (sticker && sticker.asset && !imageFailed) {
    return (
      <img
        className={className}
        src={sticker.asset}
        alt=""
        onError={() => {
          setImageFailed(true);
          if (typeof reportAssetLoadFailure === "function") {
            reportAssetLoadFailure(sticker.asset, "StickerArt");
          }
        }}
      />
    );
  }
  return (
    <span className={`${className} sticker-art-fallback`.trim()}>
      {fallback}
    </span>
  );
}

function HelmetPicker({ value, onChange, onClose }) {
  return (
    <div className="helmet-picker" onClick={(e) => e.stopPropagation()}>
      <div className="helmet-picker-title">Decorate your helmet</div>
      <div className="helmet-picker-grid">
        {HELMET_STICKERS.map((s) => (
          <button
            key={s.id}
            className={`helmet-sticker ${value === s.id ? "on" : ""}`}
            onClick={() => onChange(s.id)}
            title={s.label}
            aria-pressed={value === s.id ? "true" : "false"}
          >
            <span className="helmet-sticker-glyph">
              <StickerArt sticker={s} />
            </span>
            <span className="helmet-sticker-label">{s.label}</span>
          </button>
        ))}
      </div>
      <button className="helmet-picker-close" onClick={onClose}>
        Done
      </button>
    </div>
  );
}