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

const page = async ({
  searchParams,
}: {
  searchParams: Record<string, any>;
}) => {
  serverHelpers.tasks.getProjectTasks.prefetch({
    ...searchParams,
    searchQuery: searchParams?.q,
  });
  const dehydratedState = dehydrate(serverHelpers.queryClient);

  return (
    <HydrationBoundary state={dehydratedState}>
      <WrapperContent>
        <>
          <Suspense>
            <ResultsSearch searchParams={searchParams} />
          </Suspense>
          <Suspense>
          <TaskList searchParams={searchParams} />{" "}
          </Suspense>
        </>
      </WrapperContent>
    </HydrationBoundary>
  );
};

export default page;