import { useState, useEffect, useCallback } from "react";
import { SCREEN_BREAKPOINTS } from "~/utils/constants";
import { withErrorHandling } from "~/utils/sentry";

export const useResponsive = () => {
  const [isMobile, setIsMobile] = useState(false);
  const checkScreenSize = useCallback(withErrorHandling("checkScreenSize", () => {
    const width = window.innerWidth;

    setIsMobile(width <= SCREEN_BREAKPOINTS.MOBILE);
  }), []);

  useEffect(() => {
    checkScreenSize();
    window.addEventListener("resize", checkScreenSize);

    return () => window.removeEventListener("resize", checkScreenSize);
  }, [checkScreenSize]);

  return {
    isMobile
  };
};