import { useEffect, useRef, useState } from "react"

export function useDebouncedValue<T>(value: T, delay: number) {
  const [debouncedValue, setDebouncedValue] = useState(value)
  const timeout = useRef<number>()

  useEffect(() => {
    if (timeout.current) {
      clearTimeout(timeout.current)
    }

    timeout.current = window.setTimeout(() => {
      setDebouncedValue(value)
    }, delay)

    return () => {
      if (timeout.current) {
        clearTimeout(timeout.current)
      }
    }
  }, [value, delay])

  return debouncedValue
}
