import { useState, useEffect } from 'react';

export function useIsDesktop(minWidth = 1024) { // lg breakpoint
  const [isDesktop, setIsDesktop] = useState<boolean>(() => {
    if (typeof window === 'undefined') return false;
    return window.matchMedia(`(min-width: ${minWidth}px)`).matches;
  });

  useEffect(() => {
    const mq = window.matchMedia(`(min-width: ${minWidth}px)`);
    const onChange = () => setIsDesktop(mq.matches);
    try { mq.addEventListener('change', onChange); } catch { mq.addListener(onChange); }
    return () => { try { mq.removeEventListener('change', onChange); } catch { mq.removeListener(onChange); } };
  }, [minWidth]);

  return isDesktop;
}
