/**
 * Banner shown when the user is offline.
 * Adapted from epic/9-3-pwa-support.
 */

import '../styles/offline-banner.css'

interface OfflineBannerProps {
  isOnline: boolean
}

export function OfflineBanner({ isOnline }: OfflineBannerProps) {
  if (isOnline) return null

  return (
    <div className="offline-banner" role="status" aria-live="polite">
      <span className="offline-icon" aria-hidden="true">
        &#9679;
      </span>
      You are offline. Changes are saved locally.
    </div>
  )
}
