import { useParams } from 'react-router';
import { lazy, Suspense } from 'react';
import { PageLoader } from '../../components/PageLoader';

const DashboardL1 = lazy(() => import('./DashboardL1'));
const DashboardL2 = lazy(() => import('./DashboardL2'));
const DashboardL3 = lazy(() => import('./DashboardL3'));

export default function DashboardPage() {
  const { appId, routeId } = useParams<{ appId?: string; routeId?: string }>();

  if (routeId && appId) {
    return <Suspense fallback={<PageLoader />}><DashboardL3 /></Suspense>;
  }
  if (appId) {
    return <Suspense fallback={<PageLoader />}><DashboardL2 /></Suspense>;
  }
  return <Suspense fallback={<PageLoader />}><DashboardL1 /></Suspense>;
}
