'use client'

import type { BridgeStatus } from './types'

export function StatusBadge({ status, error }: { status: BridgeStatus | null; error: string | null }) {
  if (error) {
    return (
      <div className="flex items-center gap-2 px-3 py-1.5 bg-red-100 text-red-800 rounded-full text-sm font-medium">
        <span className="w-2 h-2 bg-red-500 rounded-full animate-pulse" />
        Offline
      </div>
    )
  }

  if (!status) {
    return (
      <div className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 text-gray-600 rounded-full text-sm font-medium">
        <span className="w-2 h-2 bg-gray-400 rounded-full animate-pulse" />
        Verbinde...
      </div>
    )
  }

  if (status.is_compiling) {
    return (
      <div className="flex items-center gap-2 px-3 py-1.5 bg-yellow-100 text-yellow-800 rounded-full text-sm font-medium">
        <span className="w-2 h-2 bg-yellow-500 rounded-full animate-pulse" />
        Kompiliert...
      </div>
    )
  }

  return (
    <div className="flex items-center gap-2 px-3 py-1.5 bg-green-100 text-green-800 rounded-full text-sm font-medium">
      <span className="w-2 h-2 bg-green-500 rounded-full" />
      Online - Port 8090
    </div>
  )
}