import { useCallback, useEffect } from "react";
import { useDispatch } from "react-redux";
import { setIsMobileScreen } from "@/src/redux/appActions";

export const useScreenSize = (mobileBreakpoint = 767) => {
  const dispatch = useDispatch();

  const checkScreenSize = useCallback(() => {
    const isMobile = window.innerWidth < mobileBreakpoint;
    dispatch(setIsMobileScreen(isMobile));
  }, [dispatch, mobileBreakpoint]);

  useEffect(() => {
    checkScreenSize();

    window.addEventListener("resize", checkScreenSize);

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