import { Wifi, WifiOff, Loader2 } from 'lucide-react'
import type { ConnectionStatus } from '../types/protocol'

interface ConnectionStatusProps {
  status: ConnectionStatus
}

export function ConnectionStatus({ status }: ConnectionStatusProps) {
  const getStatusConfig = () => {
    switch (status) {
      case 'connecting':
        return {
          icon: <Loader2 className="h-3 w-3 animate-spin" />,
          text: '连接中',
          className: 'text-amber-400 bg-amber-400/10 border-amber-400/30',
        }
      case 'connected':
        return {
          icon: <Wifi className="h-3 w-3" />,
          text: '已连接',
          className: 'text-emerald-400 bg-emerald-400/10 border-emerald-400/30',
        }
      case 'disconnected':
        return {
          icon: <WifiOff className="h-3 w-3" />,
          text: '已断开',
          className: 'text-zinc-400 bg-zinc-400/10 border-zinc-400/30',
        }
      case 'error':
        return {
          icon: <WifiOff className="h-3 w-3" />,
          text: '连接错误',
          className: 'text-red-400 bg-red-400/10 border-red-400/30',
        }
    }
  }

  const config = getStatusConfig()

  if (!config) return null

  return (
    <div className={`flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs border ${config.className}`}>
      {config.icon}
      <span>{config.text}</span>
    </div>
  )
}
