import React from 'react'

function StatusDot({ status }) {
  const getClassName = () => {
    switch (status) {
      case 'connected': return 'status-dot connected'
      case 'streaming': return 'status-dot streaming'
      case 'error': return 'status-dot error'
      case 'warning': return 'status-dot warning'
      default: return 'status-dot'
    }
  }

  return <span className={getClassName()} />
}

export function StatusBar({ wsStatus, rtcStatus, udpStatus }) {
  return (
    <div className="status-bar">
      <div className="status-item">
        <StatusDot status={wsStatus} />
        WS
      </div>
      <div className="status-item">
        <StatusDot status={rtcStatus} />
        RTC
      </div>
      <div className="status-item">
        <StatusDot status={udpStatus} />
        UDP
      </div>
    </div>
  )
}