import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
import { getQueryClient } from '@/lib/query-client';
import { searchParamsCache } from '@/lib/searchparams';
import { approvalsQueryOptions } from '../queries';
import { ApprovalsTable } from './approvals-table';

export default function ApprovalListing() {
  const page = searchParamsCache.get('page');
  const limit = searchParamsCache.get('perPage');
  const search = searchParamsCache.get('name');
  const status = searchParamsCache.get('status');
  const entityType = searchParamsCache.get('entityType');
  const sort = searchParamsCache.get('sort');
  const filters = {
    page,
    limit,
    ...(search && { search }),
    ...(status && { status }),
    ...(entityType && { entityType }),
    ...(sort && { sort })
  };
  const queryClient = getQueryClient();

  void queryClient.prefetchQuery(approvalsQueryOptions(filters));

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <ApprovalsTable />
    </HydrationBoundary>
  );
}
