// Tweaks panel
function TweaksPanel({ tweaks, setTweaks, countries, questions }) {
  const swatches = ['#b31b1b', '#1f4f66', '#c9a74b', '#0f3d2e', '#4a1e7a', '#0f1a24'];
  return (
    <div className="tweaks-panel">
      <h4>Tweaks</h4>
      <div className="tw-row">
        <label className="sans">Brand color</label>
        <div className="swatches">
          {swatches.map(s => (
            <div key={s} className={"sw " + (s===tweaks.brandColor?'active':'')}
                 style={{background:s}}
                 onClick={()=>setTweaks({...tweaks, brandColor:s})}/>
          ))}
        </div>
      </div>
      <div className="tw-row">
        <label className="sans">Theme</label>
        <div className="toggle">
          <button className={tweaks.dark?'':'active'} onClick={()=>setTweaks({...tweaks, dark:false})}>Light</button>
          <button className={tweaks.dark?'active':''} onClick={()=>setTweaks({...tweaks, dark:true})}>Dark</button>
        </div>
      </div>
      <div className="tw-row">
        <label className="sans">Default country</label>
        <select value={tweaks.defaultCountry} onChange={e=>setTweaks({...tweaks, defaultCountry:e.target.value})}>
          {countries.map(c => <option key={c} value={c}>{c}</option>)}
        </select>
      </div>
      <div className="tw-row">
        <label className="sans">Featured question</label>
        <select value={tweaks.featuredQuestion} onChange={e=>setTweaks({...tweaks, featuredQuestion:e.target.value})} style={{maxWidth:160}}>
          {questions.slice(0,30).map(q => <option key={q.id} value={q.id}>{q.id}</option>)}
        </select>
      </div>
    </div>
  );
}
window.TweaksPanel = TweaksPanel;