import { useState, useEffect } from 'react';
import { useContainerBreakpointIsAtMost } from "../../../hooks/breakpoint/index.js";
import useResizeObserver from "../../../hooks/useResizeObserver/index.js";
import { NATIONAL_SIZE } from "../../maps/index.js";
function useMapExtent() {
  const [ref, [width]] = useResizeObserver();
  const atMostMd = useContainerBreakpointIsAtMost('md');
  const [mapExtent, setMapExtent] = useState([[0, 0], NATIONAL_SIZE]);
  useEffect(() => {
    if (atMostMd) {
      setMapExtent([[0, 0], [width, NATIONAL_SIZE[1]]]);
    } else {
      setMapExtent([[0, 0], NATIONAL_SIZE]);
    }
  }, [atMostMd, width]);
  return [ref, mapExtent, setMapExtent];
}
export default useMapExtent;