import React, { lazy, Suspense } from "react";
import { Route, Routes } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import Navbar from "./components/common/Navbar";
import Footer from "./components/common/Footer";

const LoginPage = lazy(() => import("./components/account/LoginPage"));
const RegisterPage = lazy(() => import("./components/account/RegisterPage"));
const Landing = lazy(() => import("./components/Landing"));
const Dashboard = lazy(() => import("./components/profile/Dashboard"));

const App = () => {
  document.body.className = "dark-theme";

  const toggleLightDark = () => {
    if (document.body.className === "light-theme") {
      document.body.classList.toggle("dark-theme");
    } else {
      document.body.classList.toggle("light-theme");
    }
  };

  return (
    <div>
      <Navbar />
      <div style={{ margin: "5px" }}>
        <Suspense fallback={<div>Page is loading...</div>}>
          <Routes>
            <Route path="/login" element={<LoginPage />} />
            <Route path="/register" element={<RegisterPage />} />
            <Route path="/profile" element={<Dashboard />} />
            <Route path="/" element={<Landing />} />
          </Routes>
        </Suspense>
      </div>
      <button className="light-dark-toggle" onClick={toggleLightDark}>
        <div className="light-dark-toggle-inner"></div>
      </button>
      <Footer />
    </div>
  );
};

export default App;