import { cn } from "@/lib/utils"
import { StatusDot } from "@/components/status-dot"
import type { ServerStatus } from "@/lib/data"

const labels: Record<ServerStatus, string> = {
  online: "Онлайн",
  offline: "Оффлайн",
  degraded: "Внимание",
}

export function StatusBadge({ status }: { status: ServerStatus }) {
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium",
        status === "online"   && "bg-[var(--status-online-bg)] text-[var(--status-online-fg)]",
        status === "offline"  && "bg-[var(--status-offline-bg)] text-[var(--status-offline-fg)]",
        status === "degraded" && "bg-[var(--status-degraded-bg)] text-[var(--status-degraded-fg)]",
      )}
    >
      <StatusDot status={status} />
      {labels[status]}
    </span>
  )
}