/* Tweaks panel: dark/light + density */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "density": "default"
}/*EDITMODE-END*/;

const KorysolTweaks = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.documentElement.dataset.theme = tweaks.theme;
    document.documentElement.dataset.density = tweaks.density;
  }, [tweaks.theme, tweaks.density]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Vzhled">
        <TweakRadio
          label="Režim"
          value={tweaks.theme}
          options={[{ value: "light", label: "Světlý" }, { value: "dark", label: "Tmavý" }]}
          onChange={(v) => setTweak("theme", v)}
        />
        <TweakRadio
          label="Hustota"
          value={tweaks.density}
          options={[
            { value: "compact", label: "Kompaktní" },
            { value: "default", label: "Vyvážená" },
            { value: "airy", label: "Vzdušná" },
          ]}
          onChange={(v) => setTweak("density", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
};

window.KorysolTweaks = KorysolTweaks;