"use client";

import type { WsStatus } from "@/lib/ws-client";

const LABEL: Record<WsStatus, string> = {
  connecting: "连接中",
  open: "已连接",
  closed: "已断开",
  error: "连接错误",
};

const COLOR: Record<WsStatus, string> = {
  connecting: "bg-amber-500",
  open: "bg-emerald-500",
  closed: "bg-neutral-500",
  error: "bg-red-500",
};

export function ConnectionStatus({ status }: { status: WsStatus }) {
  return (
    <span className="inline-flex items-center gap-1.5 text-xs text-neutral-400">
      <span className={`h-1.5 w-1.5 rounded-full ${COLOR[status]}`} />
      {LABEL[status]}
    </span>
  );
}