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

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

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

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

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

  return isMobile
}

export default useMobile
