import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
import { ContextProvider } from "./context/contex";
import { Storage } from "@ionic/storage";

const container = document.getElementById("root");
const root = createRoot(container!);

const initApp = async () => {
 const storage = new Storage();
 await storage.create();

 // Read saved theme or use system preference
 const saved = await storage.get("darkMode");
 const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");

 // Apply before rendering
 document.documentElement.classList.toggle(
  "ion-palette-dark",
  saved !== null ? saved : prefersDark.matches
 );

 // Render app after theme is set
 root.render(
  <React.StrictMode>
   <ContextProvider>
    <App />
   </ContextProvider>
  </React.StrictMode>
 );
};

initApp();