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-emerald-50 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-400",
        status === "offline"  && "bg-red-50 text-red-700 dark:bg-red-950/40 dark:text-red-400",
        status === "degraded" && "bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-400",
      )}
    >
      <StatusDot status={status} />
      {labels[status]}
    </span>
  )
}
