(function() {
  const { useRef, useCallback } = React;

  function HoverCard({ children, className = '', style = {} }) {
    const ref = useRef(null);
    const onMove = useCallback(e => {
      const r = ref.current.getBoundingClientRect();
      ref.current.style.setProperty('--mx', ((e.clientX - r.left) / r.width  * 100).toFixed(1) + '%');
      ref.current.style.setProperty('--my', ((e.clientY - r.top)  / r.height * 100).toFixed(1) + '%');
    }, []);
    return (
      <div ref={ref} className={'card ' + className} style={style}
        onMouseMove={onMove}
        onMouseEnter={() => document.body.classList.add('hov')}
        onMouseLeave={() => document.body.classList.remove('hov')}
      >{children}</div>
    );
  }

  window.UserHoverCard = HoverCard;
})();