import { useEffect, useState } from "react";

export function useMediaQuery(query: string): boolean {
	const [matches, setMatches] = useState(() =>
		typeof window === "undefined" ? false : window.matchMedia(query).matches,
	);

	useEffect(() => {
		const mql = window.matchMedia(query);
		const onChange = () => setMatches(mql.matches);
		onChange();
		mql.addEventListener("change", onChange);
		return () => mql.removeEventListener("change", onChange);
	}, [query]);

	return matches;
}

/** Matches Tailwind's `sm` breakpoint — below it we switch to sheets + tab bar. */
export function useIsMobile(): boolean {
	return useMediaQuery("(max-width: 639px)");
}

/** True on touch-primary devices, where hover affordances don't exist. */
export function useIsTouch(): boolean {
	return useMediaQuery("(pointer: coarse)");
}