import { useEffect, useState } from 'react';

const QUERY = '(min-width: 1024px)';

/** True on viewports >= 1024px — drives the desktop GameTable layout
 *  (score sidebar, larger oval, bigger cards). */
export function useIsDesktop(): boolean {
  const [isDesktop, setIsDesktop] = useState(
    () => typeof window !== 'undefined' && window.matchMedia(QUERY).matches,
  );

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

  return isDesktop;
}