import React, { useEffect, useState } from "react";
  import { useParams, useNavigate } from "react-router-dom";
  import JobPageSection from "../sections/jobs/JobPageSection"; // Import JobPageSection
  import jobData from "../data/jobdescription"; // Import job data

  const JobPage = () => {
    const { slug } = useParams(); // Extract slug from the route
    const navigate = useNavigate(); // For redirecting if there's an error
    const [job, setJob] = useState(null);
    const [error, setError] = useState(null);

    useEffect(() => {
      // Validate the slug to ensure it's an integer
      if (!/^\d+$/.test(slug)) {
        setError("Invalid job slug. Redirecting...");
        setTimeout(() => navigate("/jobs"), 2000); // Redirect to an error page or home
        return;
      }

      // Find the job description based on the slug
      const foundJob = jobData.find((item) => item.id === parseInt(slug, 10));
      if (!foundJob) {
        setError("Job description not found. Redirecting...");
        setTimeout(() => navigate("/jobs"), 2000); // Redirect if not found
      } else {
        setJob(foundJob);
      }
    }, [slug, navigate]);

    // Display error message if any
    if (error) return <div>{error}</div>;

    // If no job data, return a "Loading..." message
    if (!job) {
      return <div>Loading...</div>;
    }

    // Render the job description content
    return (
      <div>
        <JobPageSection job={job} /> {/* Pass the job data to JobPageSection */}
      </div>
    );
  };

  export default JobPage;