/**
 * ConnectionStatusIndicator - Visual indicator for WebSocket connection status.
 */

import { ConnectionStatus } from '../../hooks/useSpecWebSocket';

interface ConnectionStatusIndicatorProps {
  status: ConnectionStatus;
  className?: string;
}

/**
 * Visual indicator for WebSocket connection status.
 * Can be used in the canvas UI to show sync state.
 */
export function ConnectionStatusIndicator({
  status,
  className = '',
}: ConnectionStatusIndicatorProps) {
  const statusConfig = {
    disconnected: {
      color: 'bg-gray-500',
      label: 'Disconnected',
    },
    connecting: {
      color: 'bg-yellow-500 animate-pulse',
      label: 'Connecting...',
    },
    connected: {
      color: 'bg-green-500',
      label: 'Connected',
    },
    reconnecting: {
      color: 'bg-yellow-500 animate-pulse',
      label: 'Reconnecting...',
    },
  };

  const config = statusConfig[status];

  return (
    <div className={`flex items-center gap-2 ${className}`}>
      <div className={`w-2 h-2 rounded-full ${config.color}`} />
      <span className="text-xs text-dark-400">{config.label}</span>
    </div>
  );
}

export default ConnectionStatusIndicator;