const BreakpointContext = React.createContext({ isMobile: false, isTablet: false, width: 1200 });

function BreakpointProvider({ children }) {
	const [width, setWidth] = React.useState(window.innerWidth);
	React.useEffect(() => {
		let raf;
		const fn = () => { raf = requestAnimationFrame(() => setWidth(window.innerWidth)); };
		window.addEventListener('resize', fn, { passive: true });
		return () => { window.removeEventListener('resize', fn); cancelAnimationFrame(raf); };
	}, []);
	const value = React.useMemo(() => ({
		isMobile: width < 768,
		isTablet: width >= 768 && width < 1024,
		isDesktop: width >= 1024,
		width,
	}), [width]);
	return React.createElement(BreakpointContext.Provider, { value }, children);
}

function useBreakpoint() {
	return React.useContext(BreakpointContext);
}

window.BreakpointProvider = BreakpointProvider;
window.useBreakpoint = useBreakpoint;