function TweaksPanel({ open, onClose, settings, setSettings }) {
  if (!open) return null;
  const accents = [
    { key: "orange", c: "oklch(0.72 0.18 55)" },
    { key: "plum", c: "oklch(0.58 0.14 330)" },
    { key: "blue", c: "oklch(0.62 0.14 240)" },
    { key: "green", c: "oklch(0.60 0.14 150)" },
    { key: "rose", c: "oklch(0.64 0.16 10)" },
  ];
  React.useEffect(()=>{
    document.documentElement.dataset.theme = settings.theme;
    document.documentElement.dataset.density = settings.density;
    document.documentElement.style.setProperty("--accent", settings.accent);
  }, [settings]);
  return (
    <div className="tweaks">
      <header>
        <Icon.settings size={13}/> Tweaks
        <div className="spacer"/>
        <button className="btn ghost icon sm" onClick={onClose}><Icon.close size={13}/></button>
      </header>
      <div className="body">
        <div className="row">
          <label>Theme</label>
          <div className="seg">
            <button data-active={settings.theme==="light"} onClick={()=>setSettings({...settings, theme:"light"})}>Light</button>
            <button data-active={settings.theme==="dark"} onClick={()=>setSettings({...settings, theme:"dark"})}>Dark</button>
          </div>
        </div>
        <div className="row">
          <label>Density</label>
          <div className="seg">
            <button data-active={settings.density==="comfortable"} onClick={()=>setSettings({...settings, density:"comfortable"})}>Comfy</button>
            <button data-active={settings.density==="compact"} onClick={()=>setSettings({...settings, density:"compact"})}>Compact</button>
          </div>
        </div>
        <div className="row">
          <label>Accent</label>
          <div className="swatches">
            {accents.map(a=>(
              <div key={a.key} className="swatch" style={{"--c":a.c}}
                data-active={settings.accent===a.c}
                onClick={()=>setSettings({...settings, accent:a.c})}/>
            ))}
          </div>
        </div>
        <div className="row">
          <label>Data scale</label>
          <div className="seg">
            <button data-active={settings.scale==="small"} onClick={()=>setSettings({...settings, scale:"small"})}>S</button>
            <button data-active={settings.scale==="mid"} onClick={()=>setSettings({...settings, scale:"mid"})}>M</button>
            <button data-active={settings.scale==="big"} onClick={()=>setSettings({...settings, scale:"big"})}>L</button>
          </div>
        </div>
        <div className="row">
          <label>Show mascot</label>
          <Switch on={settings.mascot} onChange={v=>setSettings({...settings, mascot:v})}/>
        </div>
      </div>
    </div>
  );
}

window.TweaksPanel = TweaksPanel;