import type { SurfaceState } from "./layoutTypes";

const COLOR: Record<SurfaceState, string> = {
  work: "#4C8DFF",
  wait: "#F2B84B",
  done: "#3FB950",
  error: "#F4544E",
  idle: "#5A6573",
};

export function StatusRing({ state, running }: { state: SurfaceState; running: boolean }) {
  const color = running ? COLOR[state] : "#5A6573";
  return (
    <span
      title={running ? state : "stopped"}
      style={{
        display: "inline-block",
        width: 10,
        height: 10,
        borderRadius: "50%",
        border: `2px solid ${color}`,
        boxSizing: "border-box",
        opacity: running ? 1 : 0.5,
      }}
    />
  );
}