import { Suspense } from "react";
import { Routes as ReactRoutes, Route, Navigate } from "react-router-dom";
import { HomePage } from "@/pages/home.page";
import { ThemesPage } from "@/pages/themes.page";
import { AuthPage } from "@/pages/auth.page";
import { RegisterPage } from "@/pages/register.page";
import { AddAgentsPage } from "@/pages/add-agents.page";
import { DefaultLayout } from "@/shared/layouts/DefaultLayout";

export const Routing = () => {
  return (
    <Suspense
      fallback={
        <div className="flex items-center justify-center min-h-screen">
          Загрузка...
        </div>
      }
    >
      <ReactRoutes>
        <Route element={<DefaultLayout />}>
          <Route path="/" element={<HomePage />} />
          <Route path="/auth" element={<AuthPage />} />
          <Route path="/register" element={<RegisterPage />} />
          <Route path="/themes" element={<ThemesPage />} />
          <Route path="/add-agents" element={<AddAgentsPage />} />

          <Route path="*" element={<Navigate to="/" replace />} />
        </Route>
      </ReactRoutes>
    </Suspense>
  );
};