/**
 * Returns true when the given media query matches (e.g. min-width: 640px for desktop).
 * Used to switch DayDetail between Popover (desktop) and Sheet (mobile).
 */

"use client";

import { useState, useEffect } from "react";

/**
 * Match a media query string (e.g. "(min-width: 640px)").
 * Returns undefined during SSR to avoid hydration mismatch; client gets the real value.
 */
export function useMediaQuery(query: string): boolean | undefined {
  const [matches, setMatches] = useState<boolean | undefined>(() =>
    typeof window === "undefined" ? undefined : window.matchMedia(query).matches
  );

  useEffect(() => {
    if (typeof window === "undefined") return;
    const mq = window.matchMedia(query);
    const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
    setMatches(mq.matches);
    mq.addEventListener("change", handler);
    return () => mq.removeEventListener("change", handler);
  }, [query]);

  return matches;
}

/** True when viewport is at least 640px (desktop). Undefined during SSR. */
export function useIsDesktop(): boolean | undefined {
  return useMediaQuery("(min-width: 640px)");
}
