// Tweaks for BRR Traders About page
const { useEffect } = React;

function BRRTweaks() {
  const defaults = window.__TWEAK_DEFAULTS__ || { theme: "classic", accentRed: "#E31837" };
  const [t, setTweak] = useTweaks(defaults);

  useEffect(() => {
    const body = document.body;
    body.classList.remove("theme-classic", "theme-dark", "theme-crimson");
    body.classList.add("theme-" + t.theme);
  }, [t.theme]);

  useEffect(() => {
    document.documentElement.style.setProperty("--c-red", t.accentRed);
  }, [t.accentRed]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Theme">
        <TweakRadio
          label="Mode"
          value={t.theme}
          options={[
            { value: "classic", label: "Light" },
            { value: "dark", label: "Dark" },
            { value: "crimson", label: "Warm" }
          ]}
          onChange={(v) => setTweak("theme", v)}
        />
        <TweakColor
          label="Accent"
          value={t.accentRed}
          options={["#E31837", "#C8102E", "#1E3A8A", "#0E7C3A", "#D9711F"]}
          onChange={(v) => setTweak("accentRed", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

const root = document.createElement("div");
root.id = "__brr_tweaks_root";
document.body.appendChild(root);
ReactDOM.createRoot(root).render(<BRRTweaks />);