import { useEffect, useState } from "react";

/**
 * Hook for responsive design — returns true when the media query matches.
 * Defaults to false on SSR / initial render to avoid hydration mismatch.
 */
export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const mql = window.matchMedia(query);
    setMatches(mql.matches);

    const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
    mql.addEventListener("change", handler);
    return () => mql.removeEventListener("change", handler);
  }, [query]);

  return matches;
}

export const BREAKPOINTS = {
  sm: "(max-width: 480px)",
  md: "(max-width: 768px)",
  lg: "(min-width: 1024px)",
} as const;