import "./index.css";
import { QueryClientProvider } from "@tanstack/react-query";
import { createRoot } from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router";
import DefaultLayout from "./layout/DefaultLayout.tsx";
import MainPage from "./pages/MainPage.tsx";
import ModalContainer from "./components/ModalContainer.tsx";
import ComplexPage from "./pages/ComplexPage.tsx";
import FloorsPage from "./pages/FloorsPage.tsx";
import UnitTypesPage from "./pages/UnitTypesPage.tsx";
import AboutPage from "./pages/AboutPages.tsx";
import FavoritesPage from "./pages/FavouritesPage.tsx";
import SearchPage from "./pages/SearchPage.tsx";
import LayoutWithoutFooter from "./layout/LayoutWithoutFooter.tsx";
import { queryClient } from "./lib/queryClient.ts";
import AboutComplexPage from "./pages/AboutComplexPage.tsx";

const route = createBrowserRouter([
  {
    element: <DefaultLayout />,
    children: [
      {
        path: "/unit-types",
        element: <UnitTypesPage />,
      },
      {
        path: "/about",
        element: <AboutPage />,
      },
      {
        path: "/favorites",
        element: <FavoritesPage />,
      },
      {
        path: "/search",
        element: <SearchPage />,
      },
      {
        path: "/complex/:complexName/about",
        element: <AboutComplexPage />,
      },
    ],
  },
  {
    element: <LayoutWithoutFooter />,
    children: [
      {
        path: "/",
        element: <MainPage />,
      },
      {
        path: "/complex/:complexName",
        element: <ComplexPage />,
      },
      {
        path: "/complex/:complexName/floors",
        element: <FloorsPage />,
      },
    ],
  },
]);

createRoot(document.getElementById("root")!).render(
  <>
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={route} />
      <ModalContainer />
    </QueryClientProvider>
  </>
);