'use client'

import { useEffect, useState } from 'react'

export function useIsMobile() {
	const [isMobile, setIsMobile] = useState(false)

	useEffect(() => {
		if (typeof window === 'undefined') return

		const mediaQuery = window.matchMedia('(max-width: 992px)')

		const checkIsMobile = () => {
			setIsMobile(mediaQuery.matches)
		}

		mediaQuery.addEventListener('change', checkIsMobile)
		window.addEventListener('resize', checkIsMobile)

		return () => {
			mediaQuery.removeEventListener('change', checkIsMobile)
			window.removeEventListener('resize', checkIsMobile)
		}
	}, [])

	return isMobile
}
