// ================================================================
// Tweaks panel
// ================================================================

const TweaksPanel = ({ tweaks, setTweaks, onClose }) => {
  const set = (k, v) => setTweaks({ ...tweaks, [k]: v });

  return (
    <div className="tweaks-panel">
      <div className="tweaks-head">
        <div className="tweaks-title">Personalize</div>
        <div className="icon-btn" onClick={onClose}><Icon name="x" /></div>
      </div>
      <div className="tweaks-body">
        <div className="tweak-row">
          <div className="tweak-label">Theme</div>
          <div className="select-pill">
            <button data-active={tweaks.theme === 'light'} onClick={() => set('theme', 'light')}>Light</button>
            <button data-active={tweaks.theme === 'dark'} onClick={() => set('theme', 'dark')}>Dark</button>
          </div>
        </div>
        <div className="tweak-row">
          <div className="tweak-label">Accent</div>
          <div className="swatch-row">
            {['cobalt', 'plum', 'sage', 'amber', 'coral'].map(c => (
              <div key={c} className="swatch" data-active={tweaks.accent === c} style={{ background: window.ACCENT_MAP[c] }} onClick={() => set('accent', c)} />
            ))}
          </div>
        </div>
        <div className="tweak-row">
          <div className="tweak-label">Sidebar</div>
          <div className="select-pill">
            <button data-active={!tweaks.sidebarCollapsed} onClick={() => set('sidebarCollapsed', false)}>Open</button>
            <button data-active={tweaks.sidebarCollapsed} onClick={() => set('sidebarCollapsed', true)}>Icons</button>
          </div>
        </div>
        <div className="tweak-row">
          <div className="tweak-label">Background mesh</div>
          <div className="toggle" data-on={tweaks.bgMesh} onClick={() => set('bgMesh', !tweaks.bgMesh)} />
        </div>
      </div>
    </div>
  );
};

window.TweaksPanel = TweaksPanel;