import { useMediaQuery } from "@mantine/hooks";

/**
 * True on phone-width viewports (below Mantine's `sm` breakpoint, 48em).
 *
 * Resolves in an effect, so the first render — server or client — always
 * assumes desktop. Use it for layout switches (full-screen modals, full-width
 * drawers), not for anything that must be correct on the very first paint.
 */
export const useIsMobile = () => useMediaQuery("(max-width: 48em)") ?? false;