src/hooks/use-media-query.ts

import { useEffect, useState } from "react";

export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    // Ensure window exists (for SSR)
    if (typeof window !== "undefined") {
      const media = window.matchMedia(query);
      
      // Initial check
      setMatches(media.matches);
      
      // Create listener function
      const listener = () => setMatches(media.matches);
      
      // Add listener
      media.addEventListener("change", listener);
      
      // Clean up
      return () => media.removeEventListener("change", listener);
    }
    
    return undefined;
  }, [query]);

  return matches;
}