"use client";

/**
 * 회사 상태 표시용 작은 컬러 dot + 라벨.
 * provisioning 상태일 때만 pulse 애니메이션.
 */
const MAP: Record<string, { color: string; label: string }> = {
  active: { color: "rgb(var(--v5-green-rgb))", label: "활성" },
  provisioning: { color: "var(--v5-primary)", label: "생성중" },
  failed: { color: "var(--v5-red)", label: "실패" },
  suspended: { color: "var(--v5-text-muted)", label: "정지" },
  inactive: { color: "var(--v5-text-muted)", label: "비활성" },
};

export default function StatusDot({ status }: { status?: string }) {
  const m = MAP[status || ""] || { color: "var(--v5-text-muted)", label: status || "—" };
  const isProvisioning = status === "provisioning";
  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 6,
        fontSize: "0.78rem",
        fontWeight: 600,
        color: "var(--v5-text)",
      }}
    >
      <span
        style={{
          width: 7,
          height: 7,
          borderRadius: "50%",
          background: m.color,
          boxShadow: `0 0 3px ${m.color}`,
          animation: isProvisioning ? "pulsedot 1.4s ease-in-out infinite" : "none",
        }}
      />
      {m.label}
    </span>
  );
}
