import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
import { getQueryClient } from '@/lib/query-client';
import type { EmployeeDirectoryFilters } from '../api/types';
import { employeeDirectoryQueryOptions } from '../api/queries';
import { EmployeeDirectoryTable } from './employee-directory-table';

export default async function EmployeeDirectoryListingPage({
  filters
}: {
  filters: EmployeeDirectoryFilters;
}) {
  const queryClient = getQueryClient();
  await queryClient.fetchQuery(employeeDirectoryQueryOptions(filters));

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