ReconnectionBanner.tsx

'use client';

import { useEffect, useState } from 'react';
import { messages } from '@/i18n';

/**
 * Non-intrusive banner shown while the WebSocket is disconnected. To avoid
 * flashing during the brief initial connect, it only appears after a short
 * grace period of being disconnected, and dismisses immediately on reconnect.
 */
export function ReconnectionBanner({ connected }: { connected: boolean }) {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    if (connected) {
      setVisible(false);
      return;
    }
    const timer = setTimeout(() => setVisible(true), 800);
    return () => clearTimeout(timer);
  }, [connected]);

  if (!visible) return null;

  return (
    <div className="conn-banner" role="status" aria-live="polite">
      <span aria-hidden="true">⚠ </span>
      {messages.connection.banner}
    </div>
  );
}