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

const CreateForm = lazy(() => import("./CreateForm"));
const SelectFormToUpdate = lazy(() => import("./SelectFormToUpdate"));
const UpdateForm = lazy(() => import("./UpdateForm"));
const ViewForm = lazy(() => import("./ViewForm"));
const FormPreview = lazy(() => import("./FormPreview"));

export const formRoutes = [
  <Route
    key="create-forms"
    path="/create-forms"
    element={
      <ProtectedRoute>
        <LazyRoute>
          <CreateForm />
        </LazyRoute>
      </ProtectedRoute>
    }
  />,
  <Route
    key="update-forms-select"
    path="/update-forms"
    element={
      <ProtectedRoute>
        <LazyRoute>
          <SelectFormToUpdate />
        </LazyRoute>
      </ProtectedRoute>
    }
  />,
  <Route
    key="update-forms-id"
    path="/update-forms/:id"
    element={
      <ProtectedRoute>
        <LazyRoute>
          <UpdateForm />
        </LazyRoute>
      </ProtectedRoute>
    }
  />,
  <Route
    key="view-forms-root"
    path="/view-forms"
    element={
      <ProtectedRoute>
        <LazyRoute>
          <ViewForm />
        </LazyRoute>
      </ProtectedRoute>
    }
  />,
  <Route
    key="view-forms-id"
    path="/view-forms/:id"
    element={
      <ProtectedRoute>
        <LazyRoute>
          <ViewForm />
        </LazyRoute>
      </ProtectedRoute>
    }
  />,
  <Route
    key="form-preview"
    path="/form-preview/:id"
    element={
      <ProtectedRoute>
        <LazyRoute>
          <FormPreview />
        </LazyRoute>
      </ProtectedRoute>
    }
  />,
];
