import { useEffect, useState } from "react";

const SMALL_SCREEN_QUERY = "(max-width: 600px)";

/**
 * Matches the breakpoint where the image editor collapses button labels into
 * icon-only buttons.
 */
export function useIsSmall() {
	let [isSmall, setIsSmall] = useState(() => globalThis.matchMedia?.(SMALL_SCREEN_QUERY).matches ?? false);

	useEffect(() => {
		let media = globalThis.matchMedia?.(SMALL_SCREEN_QUERY);
		if (!media) return;

		function update() {
			setIsSmall(media?.matches ?? false);
		}

		update();
		media.addEventListener("change", update);

		return () => media.removeEventListener("change", update);
	}, []);

	return isSmall;
}