import { lazy, Suspense} from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { Toaster} from "react-hot-toast";
import css from "./App.module.css";
import Lottie from "lottie-react";
import LoadingAnimation from "./assets/animations/Loading1.json";
const Playground = lazy(() => import("./pages/Playground/Playground.jsx"));
const NotFound = lazy(() => import("./pages/404/NotFound.jsx"));

function App() {
  return (
    <>
      <Toaster position="top-center" />
      <Router>
        <Routes>
          <Route
            path="/"
            element={
              <>
                <Suspense
                  fallback={
                    <>
                      <div className={`${css.animation}`}>
                        <Lottie
                          animationData={LoadingAnimation}
                          loop={true}
                          className={css.lottie}
                        />
                      </div>
                    </>
                  }
                >
                  <Playground />
                </Suspense>
              </>
            }
          />
          <Route
            path="/*"
            element={
              <>
                <Suspense
                  fallback={
                    <>
                      <div className={`${css.animation}`}>
                        <Lottie
                          animationData={LoadingAnimation}
                          loop={true}
                          className={css.lottie}
                        />
                      </div>
                    </>
                  }
                >
                  <NotFound />
                </Suspense>
              </>
            }
          />
        </Routes>
      </Router>
    </>
  );
}

export default App;