import { Suspense, type ReactNode } from 'react';
import { createBrowserRouter, type RouteObject } from 'react-router-dom';
import { appRoutes, type RouteConfig } from './config';

/**
 * A recursive function to map our custom route config to the format
 * that react-router-dom expects, applying layouts and guards.
 */
function mapRoutes(routes: RouteConfig[]): RouteObject[] {
  return routes.map((route) => {
    // Start with the base element, wrapped in Suspense for lazy loading
    let element: ReactNode = (
      <Suspense fallback={<div>Loading...</div>}>{route.element}</Suspense>
    );

    // Conditionally wrap the element in the specified layout
    // if (route.layout) {
    //   element = <route.layout>{element}</route.layout>;
    // }

    // Conditionally wrap the element in the authentication guard
    // if (route.authRequired) {
    //   element = <ProtectedRoute>{element}</ProtectedRoute>;
    // }

    return {
      path: route.path,
      element: element,
      ...(route.children && { children: mapRoutes(route.children) }),
    };
  });
}

export const router = createBrowserRouter(mapRoutes(appRoutes));