import React from "react";
import JobCard from "../../components/JobCard"; // Importing JobCard component
import jobs from "../../data/jobdata"; // Importing job data directly

import styled from "styled-components";

// Styled component for the grid layout
const JobGridWrapper = styled.div`
  justify-items: center; // Center the grid items
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));  // Dynamic columns
  gap: 2rem;  // Spacing between cards
  padding: 0 1rem; // Padding to ensure no cards are at the edges
  max-width: 1200px; // Constrain grid to a max-width
  margin: 0 auto;  // Center the grid horizontally

  // Prevent horizontal overflow
  overflow-x: hidden;

  @media (min-width: 768px) {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); // Ensure flexibility for medium screens
  }

  @media (min-width: 1024px) {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); // Three columns for larger screens
  }
`;

const JobSection = () => {
  return (
    <div>
      {jobs && Array.isArray(jobs) && jobs.length > 0 ? (
        <JobGridWrapper data-testid='grid-wrapper'>
          {jobs
            .filter((jobItem) => jobItem.status !== "Closed") // Filter out closed jobs
            .map((jobItem) => (
              <JobCard key={jobItem.id} job={jobItem} />
            ))}
        </JobGridWrapper>
      ) : (
        <p>No job listings available at the moment.</p>
      )}
    </div>
  );
};

export default JobSection;