import React from 'react';
import PropTypes from 'prop-types';

import { ReactPhotoCollage } from 'react-photo-collage';
import GalleryContainer from './ImageGalleryContainer.style';

const ImageGalleryComponent = ({ images }) => {
  const rows = images.length > 2 ? 2 : 1;
  return (
    <GalleryContainer height={[rows * 151, rows * 211]}>
      <ReactPhotoCollage
        width="100%"
        layout={[2, 2]}
        photos={images}
        showNumOfRemainingPhotos
      />
    </GalleryContainer>
  );
};

ImageGalleryComponent.propTypes = {
  images: PropTypes.arrayOf(Object).isRequired,
};

export default ImageGalleryComponent;