"use client"

import { useState, useEffect } from 'react'

/**
 * Хук для отслеживания медиа-запросов (например, для определения мобильного устройства)
 * @param query Медиа-запрос, например: '(max-width: 768px)'
 * @returns Булево значение, соответствующее запросу
 */
export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState<boolean>(false)

  useEffect(() => {
    // Проверяем, поддерживается ли matchMedia
    if (typeof window !== 'undefined' && window.matchMedia) {
      const media = window.matchMedia(query)
      // Установка начального значения
      setMatches(media.matches)

      // Обработчик изменений
      const listener = (event: MediaQueryListEvent) => {
        setMatches(event.matches)
      }

      // Добавляем слушатель
      if (media.addEventListener) {
        media.addEventListener('change', listener)
        return () => media.removeEventListener('change', listener)
      } else {
        // Для старых браузеров
        media.addListener(listener)
        return () => media.removeListener(listener)
      }
    }
    
    // Если matchMedia не поддерживается, возвращаем дефолтное значение
    return () => {}
  }, [query])

  return matches
}