/* global React */

// Hoopy — a family of 4-frame sprite-sheet animations.
// Poses: wave (greeting), nod (yes), think (? marks), jump (excited).
// Sizes: xs (32), sm (48), md (64), lg (96), xl (128).

function makeHoopy(pose) {
  return function Hoopy({ size = "md", className = "", style }) {
    const base = `hoopy-${pose}`;
    const cls = [base, size !== "md" ? size : "", className].filter(Boolean).join(" ");
    return <span className={cls} aria-hidden="true" style={style} />;
  };
}

const HoopyWave  = makeHoopy("wave");
const HoopyNod   = makeHoopy("nod");
const HoopyThink = makeHoopy("think");
const HoopyJump  = makeHoopy("jump");

// Back-compat: old HoopyThinking name maps to the real think sprite
const HoopyThinking = HoopyThink;
// Back-compat: legacy px-based API → pick a size
function HoopySprite({ px = 6 }) {
  const size = px <= 4 ? "xs" : px <= 6 ? "sm" : px <= 9 ? "md" : "lg";
  return <HoopyWave size={size} />;
}

Object.assign(window, {
  HoopyWave, HoopyNod, HoopyThink, HoopyJump,
  HoopyThinking, HoopySprite,
});