import { useState, useEffect } from 'react'

let cachedIsMobile: boolean | null = null

function detectMobile(): boolean {
  if (typeof window === 'undefined') return false
  return (
    'ontouchstart' in window ||
    navigator.maxTouchPoints > 0 ||
    window.matchMedia('(pointer: coarse)').matches
  )
}

export function useMobile(): boolean {
  const [isMobile, setIsMobile] = useState<boolean>(() => {
    if (cachedIsMobile !== null) return cachedIsMobile
    return detectMobile()
  })

  useEffect(() => {
    const mq = window.matchMedia('(pointer: coarse)')
    const update = (e: MediaQueryListEvent) => setIsMobile(e.matches)
    mq.addEventListener('change', update)
    return () => mq.removeEventListener('change', update)
  }, [])

  return isMobile
}