import { useState } from 'react'
import { useIsomorphicLayoutEffect } from 'framer-motion'

type Position = {
  x: number
  y: number
}

export const usePointerPosition = () => {
  const [point, setPoint] = useState<Position>({ x: 0, y: 0 })

  useIsomorphicLayoutEffect(() => {
    const handlePointerMove = (e: PointerEvent) => {
      setPoint({
        x: e.clientX,
        y: e.clientY,
      })
    }

    window.addEventListener('pointermove', handlePointerMove)

    return () => {
      window.removeEventListener('pointermove', handlePointerMove)
    }
  }, [])

  return point
}