import { useState, useEffect } from "react";

export default function useWindowDimensions() {
  const [isSSR, setIsSSR] = useState(false);

  useEffect(() => {
    setIsSSR(true);
  }, []);

  const [width, setWidth] = useState(isSSR ? window.innerWidth : 0);
  const [height, setHeight] = useState(isSSR ? window.innerHeight : 0);

  useEffect(() => {
    window.addEventListener("resize", () => {
      setWidth(window.innerWidth), setHeight(window.innerHeight);
    });

    return () =>
      window.removeEventListener("resize", () => {
        setWidth(window.innerWidth), setHeight(window.innerHeight);
      });
  }, []);

  return { width, height };
}