'use client'

import { useEffect, useState } from 'react'

import { texts } from '@/texts'

export const OfflineBanner = () => {
  const [isOffline, setIsOffline] = useState(false)

  useEffect(() => {
    const update = () => {
      setIsOffline(!navigator.onLine)
    }

    update()
    window.addEventListener('online', update)
    window.addEventListener('offline', update)

    return () => {
      window.removeEventListener('online', update)
      window.removeEventListener('offline', update)
    }
  }, [])

  return isOffline ? (
    <div
      aria-live="polite"
      className="fixed inset-x-0 top-0 z-[10000] bg-fourth-1000 px-4 py-2 text-center text-sm text-fourth-900"
      role="status"
    >
      {texts.common.offlineBanner}
    </div>
  ) : null
}