import React, { lazy, Suspense } from "react";
import { useTheme } from "./useTheme";

const DarkTheme = lazy(() => import("./Dark"));
const LightTheme = lazy(() => import("./Light"));

export const ThemeProvider = ({ children }) => {
  const [darkMode] = useTheme();

  return (
    <>
      <Suspense fallback={<span />}>
        {darkMode ? <DarkTheme /> : <LightTheme />}
      </Suspense>
      {children}
    </>
  );
};