'use client'

import type { ConnectionState } from '@/hooks/useRelay'

const statusConfig: Record<ConnectionState, { color: string; label: string }> =
  {
    connecting: { color: 'bg-yellow-400', label: 'Connecting...' },
    connected: { color: 'bg-green-400', label: 'Connected' },
    disconnected: { color: 'bg-slate-400', label: 'Disconnected' },
    error: { color: 'bg-red-400', label: 'Error' },
  }

export function ConnectionStatus({ state }: { state: ConnectionState }) {
  const { color, label } = statusConfig[state]

  return (
    <div className="flex items-center gap-2">
      <span className={`inline-block h-2.5 w-2.5 rounded-full ${color}`} />
      <span className="text-xs text-slate-500">{label}</span>
    </div>
  )
}
