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

const RaiseTicket = lazy(() => import("./RaiseTicket"));
const TicketProgress = lazy(() => import("./TicketProgress"));
const CloseTicket = lazy(() => import("./CloseTicket"));
const TicketLogs = lazy(() => import("./TicketLogs"));

export const ticketingRoutes = [
  <Route
    key="tickets"
    path="/tickets"
    element={
      <ProtectedRoute>
        <LazyRoute>
          <TicketProgress />
        </LazyRoute>
      </ProtectedRoute>
    }
  />,
  <Route
    key="raise-ticket"
    path="/raise-ticket"
    element={
      <ProtectedRoute>
        <LazyRoute>
          <RaiseTicket />
        </LazyRoute>
      </ProtectedRoute>
    }
  />,
  <Route
    key="close-ticket"
    path="/close-ticket"
    element={
      <ProtectedRoute>
        <LazyRoute>
          <CloseTicket />
        </LazyRoute>
      </ProtectedRoute>
    }
  />,
  <Route
    key="ticket-logs"
    path="/ticket-logs"
    element={
      <ProtectedRoute>
        <LazyRoute>
          <TicketLogs />
        </LazyRoute>
      </ProtectedRoute>
    }
  />,
];
