// _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";

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    if (typeof window !== "undefined") {
      const initializeDatabase = async () => {
        try {
          await loadWindowVariables();
          console.log("IndexedDB initialisiert.");
        } catch (error) {
          console.error("Fehler bei der Initialisierung der IndexedDB:", error);
        }
      };

      initializeDatabase();
      setInterval(() => {
        loadWindowVariables();
      }, 10000);
    }
  }, []);

  return (
    <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>
  );
}

export default MyApp;