import React, { Component } from 'react'

export const Gallery = ({ media }) => {
  const { image_order, image_lookup, display_lookup, thumbnail_lookup } = media.settings

  // console.log(display_lookup)
  // console.log(width)
  return (
    <div className='gallery-items'>
      <div className='gallery-scroll'>
        {image_order.map(id => {
          const image = display_lookup[id]
          // console.log(image)
          return (
            <GalleryItem key={id} image={image} />
          )
        })}
      </div>
    </div>
  )
}

const GalleryItem = ({ image }) => {
  return (
    <div className='gallery-item'>
      <img src={image.url} />
    </div>
  )
}