import { Grid } from 'antd';

const { useBreakpoint } = Grid;

/**
 * Shared mobile breakpoint convention.
 *
 * Returns true on phones — below Ant Design's `md` breakpoint (768px), which is
 * the same threshold the mobile CSS in `assets/css/index.css` uses. Ant reports
 * every breakpoint as `undefined` on the very first paint; we treat that as
 * desktop so wide screens never flash the mobile layout before breakpoints
 * resolve.
 *
 * Use this instead of ad-hoc `window.innerWidth` checks so responsive behaviour
 * stays consistent across the app (and matches the CSS breakpoint).
 */
export default function useIsMobile() {
	const screens = useBreakpoint();
	return screens.md === false;
}
