import React from "react";
import BlogCard from "../../components/BlogCard"; // Importing BlogCard component
import blog from "../../data/blogcardsdata"; // Importing blog data directly

import styled from "styled-components";

// Styled component for the grid layout
const BlogGridWrapper = 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 Blogsection = () => {
  return (
    <div >
      {blog && Array.isArray(blog) && blog.length > 0 ? (
        <BlogGridWrapper data-testid='grid-wrapper'>
          {blog.slice().reverse().map((blogItem) => (
            <BlogCard key={blogItem.id} blog={blogItem} />
          ))}
        </BlogGridWrapper>
      ) : (
        <p>No blogs available at the moment.</p>
      )}
    </div>
  );
};

export default Blogsection;