// Tweaks — theme toggle (claro/escuro)
const { useEffect } = React;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light"
}/*EDITMODE-END*/;

function TweaksApp() {
  const [tweaks, setTweak] = useTweaks(DEFAULTS);

  // apply theme to <html data-theme>
  useEffect(() => {
    document.documentElement.dataset.theme = tweaks.theme;
  }, [tweaks.theme]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Aparência">
        <TweakRadio
          label="Tema"
          value={tweaks.theme}
          options={[
            { value: "light", label: "Claro" },
            { value: "dark",  label: "Escuro" }
          ]}
          onChange={(v) => setTweak("theme", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById("tweaks-root")).render(<TweaksApp />);
