import { useState, useEffect } from 'react'
import theme from '$styles/theme'

const useMobile = () => {
  const [isMobile, setIsMobile] = useState(false)

  useEffect(() => {
    const checkMobile = () => {
      const md = parseInt(theme.md.replace('px', ''))
      setIsMobile(window.innerWidth < md)
    }

    checkMobile()
    window.addEventListener('resize', checkMobile)

    return () => window.removeEventListener('resize', checkMobile)
  }, [])

  return isMobile
}

export default useMobile
