"use client";

import { useEffect, useRef } from "react";
import { useJobFiltersStore } from "@/store/jobFilters.store";
import { JobListingClient } from "@/components/jobs/JobListingClient";

interface SlugWrapperProps {
  initialFilters: {
    locations?: string[];
    industries?: string[];
    educations?: string[];
    workTypes?: string[];
  };
}

export function JobListingSlugWrapper({ initialFilters }: SlugWrapperProps) {
  const { setFilter, resetFilters } = useJobFiltersStore();
  const hasInitialized = useRef(false);

  useEffect(() => {
    if (!hasInitialized.current) {
      resetFilters();
      
      if (initialFilters.locations && initialFilters.locations.length > 0) {
        setFilter("locations", initialFilters.locations);
      }
      if (initialFilters.industries && initialFilters.industries.length > 0) {
        setFilter("industries", initialFilters.industries);
      }
      if (initialFilters.educations && initialFilters.educations.length > 0) {
        setFilter("educations", initialFilters.educations);
      }
      if (initialFilters.workTypes && initialFilters.workTypes.length > 0) {
        setFilter("workTypes", initialFilters.workTypes);
      }
      
      hasInitialized.current = true;
    }
  }, [initialFilters, setFilter, resetFilters]);

  return <JobListingClient />;
}