import { Theme } from '@radix-ui/themes';
import '@radix-ui/themes/styles.css';



import React, { lazy } from 'react';
import ReactDOM from 'react-dom/client';
import {
  Route,
  RouterProvider,
  createBrowserRouter,
  createRoutesFromElements,
} from "react-router-dom";
import Layout from './Layout';
import { AppContextProvider } from './contexts/AppContextProvider';
import './index.css';



const Admin = lazy(() => import('./pages/Admin/Admin'))
const Home = lazy(() => import('./pages/Home/Home'))
const City = lazy(() => import('./pages/City/City'))
const User = lazy(() => import('./pages/User/User'))
const ManageUser = lazy(() => import('./pages/ManageUser/ManageUser'))
const ManageAdmin = lazy(() => import('./pages/ManageAdmin/ManageAdmin'))
const Properties = lazy(() => import('./pages/Properties/Properties'))
const ManageProperties = lazy(() => import('./pages/ManageProperties/ManageProperties'))
const EditProperties = lazy(() => import('./pages/EditProperties/EditProperties'))
const Login = lazy(() => import('./pages/login/login'))
const Details = lazy(() => import('./pages/propertydetails/index'))
const UnitPlan = lazy(() => import('./pages/UnitPlan/UnitPlan'))
const Profile = lazy(() => import('./pages/Profile/userProfile'))


const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Layout />}  >
      <Route index element={<Home />} />
      <Route path="admin" element={<Admin />} />
      <Route path="city" element={<City />} />
      <Route path="user" element={<User />} />
      <Route path="manageuser" element={<ManageUser />} />
      <Route path='manageadmin' element={<ManageAdmin />} />
      <Route path="properties" element={<Properties />} />
      <Route path='manageProperties' element={<ManageProperties />} />
      <Route path='editproperties/:propertyid' element={<EditProperties />} />
      <Route path="login" element={<Login />} />
      <Route path="properties/:propertyid" element={<Details />} />
      <Route path="properties/unitplan/:propertyid" element={<UnitPlan />} />
      <Route path="profile" element={<Profile />} />
    </Route >
  )
);


ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Theme>
      <AppContextProvider>
        <RouterProvider router={router} />
      </AppContextProvider>
    </Theme>
  </React.StrictMode>
)