// @design-system: notification/LiveBadge
/**
 * LiveBadge — small status indicator showing WebSocket connection state.
 *
 * Shows a pulsing red dot when connected or a static gray dot when offline.
 * The `connected` prop is set by the parent; Wave 7 will replace with a
 * useNotificationSocket hook that provides this value automatically.
 *
 * @wave 2c - UI components
 */
import { useT } from '@/lib/i18n/react';

export interface LiveBadgeProps {
  /** Whether the WebSocket is currently connected. */
  connected: boolean;
}

export function LiveBadge({ connected }: LiveBadgeProps) {
  const t = useT('notif');

  return (
    <span
      role="status"
      aria-live="polite"
      aria-label={connected ? t('live_connected') : t('live_offline')}
      className="inline-flex items-center gap-1.5"
    >
      {/* Dot — pulses when connected */}
      <span
        aria-hidden
        className={[
          'relative flex size-2 rounded-full',
          connected ? 'bg-feedback-success-500' : 'bg-text-muted',
        ].join(' ')}
      >
        {connected && (
          <span
            aria-hidden
            className="bg-feedback-success-400 absolute inline-flex size-full animate-ping motion-reduce:animate-none rounded-full opacity-75"
          />
        )}
      </span>

      <span className="text-text-secondary text-xs font-medium">
        {connected ? t('live_connected') : t('live_offline')}
      </span>
    </span>
  );
}