import { ImageCard } from "../ImageCard/ImageCard";
import "./ImageCardGrid.scss";

/**
 * Grid of {@link ImageCard}s ("imageCardGrid" element type), e.g. product
 * screenshots with captions.
 *
 * @param {Object} props
 * @param {Array<{image: string|null, text: string|null}>} props.items - One entry per card.
 */
export const ImageCardGrid = ({ items }) => {
  return (
    <div className="gridcontainer">
      <div className="imagecardgrid">
        {items.map((item, index) => (
          <ImageCard key={index} image={item.image} text={item.text} />
        ))}
      </div>
    </div>
  );
};