import React, { lazy } from "react";
import { Route } from "react-router-dom";
import ProtectedRoute from "../../auth/ProtectedRoute";
import { LazyRoute } from "../../common/LazyRoute";

const UserCreate = lazy(() => import("./UserCreate"));
const UserProfile = lazy(() => import("./UserProfile"));
const UsersList = lazy(() => import("./UsersList"));

export const userManagementRoutes = [
  <Route
    key="user-create"
    path="/user-create"
    element={
      <ProtectedRoute>
        <LazyRoute>
          <UserCreate />
        </LazyRoute>
      </ProtectedRoute>
    }
  />,
  <Route
    key="user-profile"
    path="/user-profile/:id"
    element={
      <ProtectedRoute>
        <LazyRoute>
          <UserProfile />
        </LazyRoute>
      </ProtectedRoute>
    }
  />,
  <Route
    key="users-list"
    path="/users"
    element={
      <ProtectedRoute>
        <LazyRoute>
          <UsersList />
        </LazyRoute>
      </ProtectedRoute>
    }
  />,
];
