import React from 'react'
import { ImageGalleryWrapper, FigureItem, ImageWrapper, ImageItem } from './styled'
import { Image } from 'atoms/Image'

const renderingImageItems = props => {
  const imageList = []

  const imageRendering = (item, index) => {
    const { image } = item
    const view = (
      <FigureItem title={image.label}>
        <ImageWrapper>
          <ImageItem src={image.value} alt={image.label} nowrap />
        </ImageWrapper>
      </FigureItem>
    )
    imageList.push(view)
  }

  props.forEach(imageRendering)
  return imageList
}

function renderImageGallery(props: any) {
  return <ImageGalleryWrapper>{renderingImageItems(props)}</ImageGalleryWrapper>
}

export { renderImageGallery }