// AngelRobot — image-based mascot (user's hand-drawn angel).
// Source image faces RIGHT natively. Use `facing` prop to flip.
//   facing="right" — pushing/looking right (default for sprite-as-drawn)
//   facing="left"  — looking left (mirrored)
// Backwards-compat: `view="front"` => left, `view="side"` => right.

const AngelRobot = ({ size = 120, facing, view, style = {} }) => {
  const dir = facing || (view === "front" ? "left" : "right");
  const flip = dir === "left" ? "scaleX(-1)" : "scaleX(1)";
  const box = Math.round(size * 1.35);
  return (
    <div style={{ width: box, height: box, display: "inline-block", ...style }}>
      <img
        src="assets/angel.png"
        alt="RedGone angel"
        style={{
          width: "100%", height: "100%", objectFit: "contain",
          transform: flip, display: "block",
          pointerEvents: "none", userSelect: "none",
        }}
        draggable={false}
      />
    </div>
  );
};

window.AngelRobot = AngelRobot;