/* Animated cursor + click ring. The cursor is positioned by `target` (x,y in
   canvas coords). When `click` increments, the ring fires and the cursor
   briefly scales down to simulate a press. */

const { useEffect, useRef, useState } = React;

function CursorSVG() {
  return (
    <svg viewBox="0 0 22 22" width="22" height="22" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M3 1.5 L3 17 L7 13 L9.5 19 L12 17.8 L9.6 12 L15.5 12 Z"
        fill="#ffffff"
        stroke="#0a0a0a"
        strokeWidth="1.2"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function Cursor({ x, y, click, pressed, fast }) {
  const ringRef = useRef(null);
  useEffect(() => {
    if (click > 0 && ringRef.current) {
      ringRef.current.classList.remove('fire');
      // force reflow
      void ringRef.current.offsetWidth;
      ringRef.current.classList.add('fire');
    }
  }, [click]);

  return (
    <>
      <div
        className={['cursor', fast ? 'fast' : '', pressed ? 'pressed' : ''].join(' ')}
        style={{ left: x, top: y }}
      >
        <CursorSVG />
      </div>
      <div ref={ringRef} className="click-ring" style={{ left: x, top: y }} />
    </>
  );
}

window.Cursor = Cursor;