import { useState, useEffect } from 'react';

function getWindowDimensions() {
   const { innerWidth: width, innerHeight: height } = window;
   return { width, height };
}

export function useWindowDimensions() {
   const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
   useEffect(() => {
      function handleResize() { setWindowDimensions(getWindowDimensions()); }
      window.addEventListener('resize', handleResize);
      return () => window.removeEventListener('resize', handleResize);
   }, []);
   return windowDimensions;
}

export function useDebounce(value, delay) {
   const [debouncedValue, setDebouncedValue] = useState(value);
   useEffect(() => {
      const handler = setTimeout(() => setDebouncedValue(value), delay);
      return () => clearTimeout(handler);
   }, [value, delay]);
   return debouncedValue;
}