import { useState, useEffect } from 'react';

/**
 * Hook to detect if a media query matches.
 * Returns false during SSR and on first render (safe default).
 */
const useMediaQuery = (query) => {
    const [matches, setMatches] = useState(false);
    useEffect(() => {
        if (typeof window === "undefined")
            return;
        const mql = window.matchMedia(query);
        setMatches(mql.matches);
        const handler = (e) => setMatches(e.matches);
        mql.addEventListener("change", handler);
        return () => mql.removeEventListener("change", handler);
    }, [query]);
    return matches;
};

export { useMediaQuery };
