import React from "react";
const WINDOWS = {
  setup: { color: "var(--window-setup)", label: "Setup" },
  round: { color: "var(--window-round)", label: "Round" },
  showdown: { color: "var(--window-showdown)", label: "Showdown" },
  counter: { color: "var(--window-counter)", label: "Counter" }
};
export function TimingBadge({ window = "round", style }) {
  const w = WINDOWS[window] || WINDOWS.round;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: "7px", padding: "4px 12px 4px 9px", borderRadius: "9999px",
      border: "1px solid color-mix(in srgb, " + w.color + " 45%, transparent)",
      background: "color-mix(in srgb, " + w.color + " 12%, transparent)",
      fontFamily: "var(--font-sans)", fontSize: "10px", fontWeight: 900, letterSpacing: "0.16em", textTransform: "uppercase",
      color: w.color, ...style
    }}>
      <span style={{ width: "6px", height: "6px", borderRadius: "50%", background: w.color, boxShadow: "0 0 6px " + w.color }}></span>
      {w.label}
    </span>
  );
}