import { useEffect, useRef } from 'react';

const useInterval = (callback, delay) => {
  const savedCallback = useRef();

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }

    if (delay !== null) {
      const id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
};

export default useInterval;

/* Example Usage:
import React, { useState } from 'react';
import useInterval from './useInterval';

function Counter() {
  const [count, setCount] = useState(0);
  const [delay, setDelay] = useState(1000); // 1 second delay
  const [isRunning, setIsRunning] = useState(true);

  useInterval(
    () => {
      setCount(prevCount => prevCount + 1);
    },
    isRunning ? delay : null
  );

  const handleDelayChange = (e) => {
    setDelay(Number(e.target.value));
  };

  return (
    <div>
      <h1>Counter: {count}</h1>
      <p>
        Delay: 
        <input 
          type="number" 
          value={delay} 
          onChange={handleDelayChange}
          min="100"
        /> ms
      </p>
      <button onClick={() => setIsRunning(!isRunning)}>
        {isRunning ? 'Pause' : 'Resume'}
      </button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}
*/