import WrapperContent from "@/components/WrapperContent";
import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
import { serverHelpers } from "@/app/_trpc/serverHelper";
import { lazy, Suspense } from "react";
export const dynamic = "force-dynamic";
const ProjectPage = lazy(() => import("./_components/ProjectPage"));

const page = async ({
  searchParams,
}: {
  searchParams: Record<string, null>;
}) => {
  serverHelpers.projects.getProjects.prefetch({
    ...searchParams,
    includeAreas: true,
    includeFloor: true,
    includeTasks: true,
  });

  const dehydratedState = dehydrate(serverHelpers.queryClient);

  return (
    <HydrationBoundary state={dehydratedState}>
      <WrapperContent>
        <Suspense>
          <ProjectPage />
        </Suspense>
      </WrapperContent>
    </HydrationBoundary>
  );
};

export default page;