import React from "react";

const PrintMessage = () => {
  const fontFamilies = ["arial", "cursive", "monospace", "sans-serif", "sans"];
  let [count, setCount] = React.useState(0);

  const printMessage = () => {
    return <span className={`${fontFamilies[count]} world`}>World</span>;
  };

  useInterval(() => {
    // Your custom logic here
    if (count < fontFamilies.length - 1) {
      setCount(count + 1);
    } else {
      setCount(0);
    }
  }, 1000);

  function useInterval(callback, delay) {
    const savedCallback = React.useRef();

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

    // Set up the interval.
    React.useEffect(() => {
      function tick() {
        savedCallback.current();
      }
      if (delay !== null) {
        let id = setInterval(tick, delay);
        return () => clearInterval(id);
      }
    }, [delay]);
  }

  return (
    <div>
      <h3>Hello {printMessage()}</h3>
    </div>
  );
};

export default PrintMessage;