import { ErrorBoundary } from "@/components";
import {
  CompanyMetrics,
  FaqCreatePage,
  FaqItemPage,
  FaqPage,
  LocalizationPage,
  NotFoundPage,
  SignInPage,
} from "@/pages";
import { withSuspense } from "@/shared/hocs";
import { Navigate, createBrowserRouter } from "react-router-dom";
import { AppLayout, AuthLayout } from "../layouts";
import { RequireAuthProvider } from "../providers";

export const routes = createBrowserRouter([
  {
    errorElement: <ErrorBoundary />,
    element: withSuspense(RequireAuthProvider),
    children: [
      {
        errorElement: <ErrorBoundary />,
        element: withSuspense(AppLayout),
        children: [
          {
            path: "/",
            element: <Navigate to={"/localization"} />,
          },
          {
            path: "/localization",
            errorElement: <ErrorBoundary />,
            element: withSuspense(LocalizationPage),
          },
          {
            path: "/faq",
            errorElement: <ErrorBoundary />,
            element: withSuspense(FaqPage),
          },
          {
            path: "/faq/create",
            errorElement: <ErrorBoundary />,
            element: withSuspense(FaqCreatePage),
          },
          {
            path: "/faq/:faqItemId",
            errorElement: <ErrorBoundary />,
            element: withSuspense(FaqItemPage),
          },
          {
            path: "/company-metrics",
            errorElement: <ErrorBoundary />,
            element: withSuspense(CompanyMetrics),
          },
          {
            path: "*",
            errorElement: <ErrorBoundary />,
            element: withSuspense(NotFoundPage),
          },
        ],
      },
    ],
  },
  {
    errorElement: <ErrorBoundary />,
    element: withSuspense(AuthLayout),
    children: [
      {
        path: "/sign-in",
        errorElement: <ErrorBoundary />,
        element: withSuspense(SignInPage),
      },
    ],
  },
  {
    path: "*",
    element: withSuspense(NotFoundPage),
  },
]);