import { dehydrate, HydrationBoundary, QueryClient } from "@tanstack/react-query";
import { JobListingClient } from "@/components/jobs/JobListingClient";
import { JobService } from "@/services/job.service";
import { JobFilters } from "@/store/jobFilters.store";

export const metadata = {
  title: "Jobs - JobVumi",
  description: "Find the best jobs matching your profile.",
};

export default async function JobListingPage() {
  const queryClient = new QueryClient();

  // Initial SSR filters
  const initialFilters: JobFilters = {
    keyword: "",
    locations: [],
    industries: [],
    educations: [],
    datePosted: "all",
    workModes: [],
    workTypes: [],
    workShifts: [],
    page: 1,
    limit: 10,
  };

  await queryClient.prefetchQuery({
    queryKey: ["jobs", initialFilters],
    queryFn: () => JobService.getFilteredJobs(initialFilters),
  });

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