/* planner-tweaks.jsx — Tweaks panel for theme/motion/feature toggles */

function PlannerTweaks() {
  const defaults = window.PLANNER_TWEAK_DEFAULTS;
  const [t, setTweak] = window.useTweaks(defaults);

  return (
    <window.TweaksPanel title="Planner Tweaks">
      <window.TweakSection label="Theme"/>
      <window.TweakRadio
        label="Style"
        value={t.theme}
        onChange={(v) => setTweak("theme", v)}
        options={["paper", "plasticine", "blocks", "chalkboard"]}
      />
      <window.TweakSection label="Motion & magic"/>
      <window.TweakSlider
        label="Motion intensity"
        min={1} max={10} step={1}
        value={t.motion}
        onChange={(v) => setTweak("motion", v)}
      />
      <window.TweakToggle
        label="Day mascots"
        value={t.mascots}
        onChange={(v) => setTweak("mascots", v)}
      />
      <window.TweakToggle
        label="Weather scene"
        value={t.showWeather}
        onChange={(v) => setTweak("showWeather", v)}
      />
      <window.TweakToggle
        label="Sticker tray"
        value={t.showStickers}
        onChange={(v) => setTweak("showStickers", v)}
      />
    </window.TweaksPanel>
  );
}

window.PlannerTweaks = PlannerTweaks;