// Tweaks panel

function TweaksPanel({ state, setState, onClose }) {
  const { theme, accent, cardVariant, heroVariant, bidPanelVariant } = state;
  const set = (k, v) => setState({ ...state, [k]: v });
  return (
    <div className="tweaks-panel">
      <div className="tweaks-header">
        <span className="tweaks-title">Tweaks</span>
        <button className="btn btn-ghost btn-sm" style={{ width: 24, height: 24, padding: 0 }} onClick={onClose}>
          <IcX size={14} />
        </button>
      </div>
      <div className="tweaks-body">
        <div className="tweak-row">
          <span className="tweak-label">Theme</span>
          <div className="tweak-seg">
            <button data-on={theme === "light"} onClick={() => set("theme", "light")}>Light</button>
            <button data-on={theme === "dark"} onClick={() => set("theme", "dark")}>Dark</button>
          </div>
        </div>
        <div className="tweak-row">
          <span className="tweak-label">Primary accent</span>
          <div className="tweak-seg">
            <button data-on={accent === "blue"} onClick={() => set("accent", "blue")}>Blue</button>
            <button data-on={accent === "emerald"} onClick={() => set("accent", "emerald")}>Emerald</button>
          </div>
        </div>
        <div className="tweak-row">
          <span className="tweak-label">Listing cards</span>
          <div className="tweak-seg">
            <button data-on={cardVariant === "editorial"} onClick={() => set("cardVariant", "editorial")}>Editorial</button>
            <button data-on={cardVariant === "dense"} onClick={() => set("cardVariant", "dense")}>Dense rows</button>
          </div>
        </div>
        <div className="tweak-row">
          <span className="tweak-label">Landing hero</span>
          <div className="tweak-seg">
            <button data-on={heroVariant === "photo"} onClick={() => set("heroVariant", "photo")}>Full-bleed</button>
            <button data-on={heroVariant === "stats"} onClick={() => set("heroVariant", "stats")}>Stat grid</button>
          </div>
        </div>
        <div className="tweak-row">
          <span className="tweak-label">Bid panel</span>
          <div className="tweak-seg">
            <button data-on={bidPanelVariant === "compact"} onClick={() => set("bidPanelVariant", "compact")}>Compact</button>
            <button data-on={bidPanelVariant === "expanded"} onClick={() => set("bidPanelVariant", "expanded")}>Expanded</button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TweaksPanel });