// _app.js
import { useEffect } from "react";
import { loadWindowVariables } from "../utils/loadWindowVariables";
import Header from "../components/Header";
import Navigation from "../components/Navigation";
import Footer from "../components/Footer";
import "../styles/globals.css";
import { Provider } from "react-redux";
import { setVariables } from "../store/variablesSlice";
import store from "../store/store";

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    const loadAndStoreVariables = async () => {
      const variables = await loadWindowVariables();
      store.dispatch(setVariables(variables));
    };

    if (typeof window !== "undefined") {
      loadAndStoreVariables(); // Initial load

      // Interval for updating the Redux store every 10 seconds
      const intervalId = setInterval(loadAndStoreVariables, 10000);

      // Cleanup interval when component unmounts
      return () => clearInterval(intervalId);
    }
  }, []);

  return (
    <Provider store={store}>
      <div className="bg-gray-100 flex flex-col min-h-screen overflow-hidden">
        <Header />
        <div className="flex flex-grow w-full">
          <Navigation className="w-1/5" />
          <main className="flex-1 p-4">
            <Component {...pageProps} />
          </main>
        </div>
        <Footer />
      </div>
    </Provider>
  );
}

export default MyApp;