"use client"

import { useState, useEffect } from 'react'

export function useMediaQuery(query: string): boolean {
  // Определяем начальное состояние на стороне сервера (SSR)
  const [matches, setMatches] = useState(false)

  useEffect(() => {
    // После монтирования компонента проверяем соответствие
    const media = window.matchMedia(query)
    
    // Устанавливаем начальное значение
    setMatches(media.matches)
    
    // Создаем функцию-обработчик, которая будет вызываться при изменении медиа-запроса
    const listener = (event: MediaQueryListEvent) => {
      setMatches(event.matches)
    }
    
    // Добавляем слушатель изменений
    media.addEventListener('change', listener)
    
    // Очищаем слушатель при размонтировании компонента
    return () => {
      media.removeEventListener('change', listener)
    }
  }, [query]) // Перезапускаем эффект только при изменении запроса
  
  return matches
}