/* FiveM page entry */

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

const FivemApp = () => {
  const [theme, setTheme] = React.useState(() => {
    if (typeof localStorage !== "undefined") {
      const stored = localStorage.getItem("ah-theme");
      if (stored === "light" || stored === "dark") return stored;
    }
    return THEME_DEFAULTS.theme;
  });

  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme === "dark" ? "dark" : "light");
    if (typeof localStorage !== "undefined") {
      localStorage.setItem("ah-theme", theme);
    }
  }, [theme]);

  const toggleTheme = () => setTheme((t) => (t === "dark" ? "light" : "dark"));

  return (
    <>
      <Nav theme={theme} onToggleTheme={toggleTheme} />
      <Fivem />
      <Footer />
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<FivemApp />);