'use client';

import { useEffect, useState } from 'react';

/**
 * 响应式断点 hook(SSR 安全)。
 *
 * 用法:
 *   const isXl = useMediaQuery('(min-width: 1280px)');
 *   const isMobile = useMediaQuery('(max-width: 767px)');
 *
 * SSR/初次渲染策略:
 *   - server / hydration 第一帧 → false(无 window)
 *   - 客户端 mount 后 → 真实匹配值,触发 re-render
 *   - 客户端 viewport 变化 → addEventListener('change') 自动响应
 *
 * 对 PAC 详情页:桌面用户首帧会一闪 tabs 然后切到 grid。无视觉断层(都 fill 父高),
 * 仅 0-100ms 间隔。如果在意完美 SSR,后续可改用 cookie hint 透传 viewport。
 */
export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const mql = window.matchMedia(query);
    setMatches(mql.matches);
    const onChange = (e: MediaQueryListEvent) => setMatches(e.matches);
    mql.addEventListener('change', onChange);
    return () => mql.removeEventListener('change', onChange);
  }, [query]);

  return matches;
}
