// @ts-ignore
import { useState, useEffect } from 'react';

export function useMediaQuery({maxWidth}:{maxWidth:number|string}) {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const media = window.matchMedia(`(max-width: ${maxWidth})`);
    if (media.matches !== matches) {
      setMatches(media.matches);
    }
    const listener = () => {
      setMatches(media.matches);
    };
    media.addEventListener("change", listener);
    return () => media.removeEventListener("change", listener);
  }, [matches, maxWidth]);

  return matches;
}