import type { Mode } from "./Room";

export function ModeToggle({ mode, onChange }: { mode: Mode; onChange: (m: Mode) => void }) {
  const seg = (m: Mode): React.CSSProperties => ({
    flex: 1,
    height: 30,
    border: "none",
    borderRadius: 6,
    cursor: "pointer",
    font: "600 13px system-ui, sans-serif",
    background: mode === m ? "#fff" : "transparent",
    color: mode === m ? "#222" : "#666",
    boxShadow: mode === m ? "0 1px 3px rgba(0,0,0,0.15)" : "none",
  });
  return (
    <div style={{ gridColumn: "1 / -1", display: "flex", gap: 2, padding: 3, background: "#d9d9d9", borderRadius: 9 }}>
      <button style={seg("layout")} onClick={() => onChange("layout")}>
        Layout
      </button>
      <button style={seg("room")} onClick={() => onChange("room")}>
        Room
      </button>
    </div>
  );
}