import { useState, useEffect } from 'react';

/**
 * 미디어 쿼리 훅
 * @param {string} query - CSS 미디어 쿼리 문자열
 * @returns {boolean} 쿼리 매칭 여부
 */
export function useMediaQuery(query) {
  const [matches, setMatches] = useState(() => {
    if (typeof window !== 'undefined') {
      return window.matchMedia(query).matches;
    }
    return false;
  });

  // DOM 이벤트 리스너이므로 useEffect 사용 허용
  useEffect(() => {
    const mediaQuery = window.matchMedia(query);
    const handler = (e) => setMatches(e.matches);

    mediaQuery.addEventListener('change', handler);
    return () => mediaQuery.removeEventListener('change', handler);
  }, [query]);

  return matches;
}

/**
 * 모바일 여부 확인 훅
 */
export const useIsMobile = () => useMediaQuery('(max-width: 768px)');

/**
 * 데스크탑 여부 확인 훅
 */
export const useIsDesktop = () => useMediaQuery('(min-width: 769px)');

/**
 * 태블릿 여부 확인 훅
 */
export const useIsTablet = () => useMediaQuery('(min-width: 769px) and (max-width: 1024px)');
