/**
 * StatusDot — small colored indicator for connection/state.
 */

const STATE_COLORS: Record<string, string> = {
  connected: "var(--success)",
  idle: "var(--text-muted)",
  processing: "var(--processing)",
  stopped: "var(--text-muted)",
  error: "var(--error)",
  done: "var(--success)",
};

interface StatusDotProps {
  state: string;
  glow?: boolean;
}

export function StatusDot({ state, glow = false }: StatusDotProps) {
  const color = STATE_COLORS[state] || "var(--text-muted)";
  return (
    <span
      style={{
        display: "inline-block",
        width: 8,
        height: 8,
        borderRadius: "50%",
        background: color,
        boxShadow: glow ? `0 0 6px ${color}` : undefined,
      }}
    />
  );
}