const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "split",
  "cardStyle": "detailed",
  "density": "default"
}/*EDITMODE-END*/;

const TweaksPanel = ({ tweaks, setTweak, visible }) => {
  if (!visible) return null;
  return (
    <div className="tweaks-panel">
      <div className="tweaks-head">
        <h4>Tweaks</h4>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--fg-3)" }}>_lint_error</span>
      </div>
      <div className="tweaks-body">
        <div className="tweak-row">
          <span className="tlabel">Hero layout</span>
          <div className="seg">
            {["centered", "split"].map((v) => (
              <button key={v} className={tweaks.heroLayout === v ? "active" : ""} onClick={() => setTweak("heroLayout", v)}>{v}</button>
            ))}
          </div>
        </div>
        <div className="tweak-row">
          <span className="tlabel">Card style</span>
          <div className="seg">
            {["detailed", "minimal"].map((v) => (
              <button key={v} className={tweaks.cardStyle === v ? "active" : ""} onClick={() => setTweak("cardStyle", v)}>{v}</button>
            ))}
          </div>
        </div>
        <div className="tweak-row">
          <span className="tlabel">Density</span>
          <div className="seg">
            {["compact", "default", "spacious"].map((v) => (
              <button key={v} className={tweaks.density === v ? "active" : ""} onClick={() => setTweak("density", v)}>{v}</button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { TWEAK_DEFAULTS, TweaksPanel });