// frontend/components/connectors/ConnectStateBadge.tsx — 연결 상태 배지 (§5.3 색표)
import type { ConnState } from "@/lib/types";

// state → 배지 라벨 + 점 색 클래스 (dash.css 액센트)
// connected 는 row 의 last 텍스트("방금 동기화"/"오늘 09:12"/"1분 전")를 라벨로 쓴다.
const MAP: Record<ConnState, { label: string; dotClass: string }> = {
  connected: { label: "방금 동기화", dotClass: "green" },
  syncing: { label: "동기화 중…", dotClass: "blue" },
  disconnected: { label: "연결 안 됨", dotClass: "faint" },
  error: { label: "동기화 실패 · 다시 시도", dotClass: "coral" },
  token_expired: { label: "권한 만료 · 다시 연결", dotClass: "amber" },
};

export function ConnectStateBadge({ state, last }: { state: ConnState; last?: string }) {
  const m = MAP[state];
  const label = state === "connected" && last ? last : m.label;
  return (
    <span className={"cs-badge cs-" + state}>
      <i className={"dot dot-" + m.dotClass} />
      {label}
    </span>
  );
}