import { useEffect, useState } from "react";

export function useIsMobile(breakpoint = 1024) {
  const [isMobile, setIsMobile] = useState<boolean | null>(null);

  useEffect(() => {
    const check = () => setIsMobile(window.innerWidth < breakpoint);

    check();
    window.addEventListener("resize", check);

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

  return isMobile;
}
export function useIsMediumScreen(breakpoint = 1280) {
  const [isMediumScreen, setIsMediumScreen] = useState<boolean | null>(null);

  useEffect(() => {
    const check = () => setIsMediumScreen(window.innerWidth < breakpoint);

    check();
    window.addEventListener("resize", check);

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

  return isMediumScreen;
}
