import React from 'react'

export function ModeBadge({ mode }) {
  const getModeInfo = () => {
    switch (mode) {
      case 'webrtc':
        return { className: 'webrtc', text: 'WebRTC (UDP ~100ms)' }
      case 'h264':
        return { className: 'h264', text: 'H.264 WebSocket (~200ms)' }
      case 'jpeg':
        return { className: 'jpeg', text: 'JPEG WebSocket (~300ms)' }
      default:
        return { className: 'detecting', text: 'Detectando melhor modo...' }
    }
  }

  const { className, text } = getModeInfo()

  return (
    <div className={`mode-badge ${className}`}>
      {text}
    </div>
  )
}