import React from 'react'
import { useNetworkStability } from '../hooks/useNetworkStability'

export const ConnectivityBanner: React.FC = () => {
  const { isOnline, isStable, reconnectAttempts } = useNetworkStability()

  const isReconnecting = !isOnline || (!isStable && reconnectAttempts > 0)
  if (!isReconnecting) return null

  return (
    <div className="connectivity-banner" role="status" aria-live="polite">
      <span className="dot" /> {!isOnline ? 'Connection lost. Reconnecting...' : 'Reconnecting to server...'}
    </div>
  )
}