import { useState, useEffect, useCallback } from "react";
const useMediaQueryList = (queries, values, defaultValue) => {
  const mediaQueryLists = queries.map((q) => window.matchMedia(q));
  const getValue = useCallback(() => {
    const index = mediaQueryLists.findIndex((mql) => mql.matches);
    return typeof values[index] !== "undefined" ? values[index] : defaultValue;
  }, [defaultValue, mediaQueryLists, values]);
  const [value, setValue] = useState(getValue);
  useEffect(() => {
    const handler = () => setValue(getValue);
    mediaQueryLists.forEach((mql) => mql.addEventListener("change", handler));
    return () => mediaQueryLists.forEach(
      (mql) => mql.removeEventListener("change", handler)
    );
  }, [getValue, mediaQueryLists]);
  return value;
};
export {
  useMediaQueryList
};
