import React, { memo } from "react";
import Masonry from "react-masonry-css";
import { useGenerator } from "../../context/GeneratorContext";

function ImageGrid({ children, className = "" }) {
  const { thumbnailSize } = useGenerator();
  
  // Adjust columns based on thumbnail size
  const breakpointColumns = thumbnailSize === "small"
    ? {
        default: 6,
        1536: 5, // 2xl
        1280: 4, // xl
        1024: 3, // lg
        768: 2,  // md
        640: 1   // sm
      }
    : thumbnailSize === "large"
    ? {
        default: 3,
        1280: 3, // xl
        1024: 2, // lg
        768: 2,  // md
        640: 1   // sm
      }
    : { // medium (default)
        default: 4,
        1536: 4, // 2xl
        1280: 3, // xl
        768: 2,  // md
        640: 1   // sm
      };

  return (
    <Masonry
      breakpointCols={breakpointColumns}
      className={`masonry-grid thumbnail-${thumbnailSize || 'medium'} ${className}`}
      columnClassName="masonry-grid-column"
      role="list"
      aria-label="Image grid"
    >
      {children}
    </Masonry>
  );
}

export default memo(ImageGrid);