import * as React from "react";

const MOBILE_BREAKPOINT = 768;

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
    undefined,
  );

  React.useEffect(() => {
    const checkMobile = () => {
      const mobile = window.innerWidth < MOBILE_BREAKPOINT;
      setIsMobile((prev) => {
        // Éviter les re-renders inutiles si la valeur n'a pas changé
        if (prev === mobile) return prev;
        return mobile;
      });
    };

    // Vérification initiale
    checkMobile();

    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
    mql.addEventListener("change", checkMobile);

    return () => mql.removeEventListener("change", checkMobile);
  }, []);

  return !!isMobile;
}