import type { RouteObject } from 'react-router';
import AppLayout from './appLayout';
import Home from './pages/Home';
import NotFound from './pages/NotFound';
import GlobalSearch from "./features/global-search/pages/GlobalSearch";
import DetailPage from "./features/global-search/pages/DetailPage";
import { Suspense } from "react";
import LoadingFallback from "./features/global-search/components/shared/LoadingFallback";

export const routes: RouteObject[] = [
  {
    path: "/",
    element: <AppLayout />,
    children: [
      {
        index: true,
        element: <Home />,
        handle: { showInNavigation: true, label: 'Home' }
      },
      {
        path: "global-search/:query",
        element: (
					<Suspense fallback={<LoadingFallback />}>
						<GlobalSearch />
					</Suspense>
				),
        handle: { showInNavigation: false }
      },
      {
        path: "object/:objectApiName/:recordId",
        element: (
					<Suspense fallback={<LoadingFallback />}>
						<DetailPage />
					</Suspense>
				),
        handle: { showInNavigation: false }
      },
      {
        path: '*',
        element: <NotFound />
      }
    ]
  }
];