import { useState } from "react"
import { useDebounceCallback, useEventListener } from "usehooks-ts"

export type MousePosition = {
  x: number
  y: number
}

export function useMousePosition({
  initialX = 0,
  initialY = 0,
  throttle = 0,
}: {
  initialX?: number
  initialY?: number
  throttle?: number
} = {}) {
  const [mousePosition, setMousePosition] = useState<MousePosition>({
    x: initialX ?? 0,
    y: initialY ?? 0,
  })

  const debouncedSetMousePosition = useDebounceCallback(
    setMousePosition,
    throttle,
  )

  useEventListener("mousemove", event => {
    debouncedSetMousePosition({
      x: event.clientX,
      y: event.clientY,
    })
  })

  return mousePosition
}