import { ref, onMounted, onUnmounted } from 'vue'

/** Browser online/offline state via navigator.onLine + events. */
export function useOnline() {
  const online = ref(navigator.onLine)

  function setOnline() { online.value = true }
  function setOffline() { online.value = false }

  onMounted(() => {
    window.addEventListener('online', setOnline)
    window.addEventListener('offline', setOffline)
  })
  onUnmounted(() => {
    window.removeEventListener('online', setOnline)
    window.removeEventListener('offline', setOffline)
  })

  return { online }
}