import React, { Component } from 'react'
import { useKeenSlider } from "keen-slider/react"
import "keen-slider/keen-slider.min.css"

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

  const [sliderRef] = useKeenSlider({
    slidesPerView: 2,
    mode: "free-snap",
    spacing: 15,
    centered: true,
    loop: false
  });
  // console.log(display_lookup)
  // console.log(width)
  return (
    <div ref={sliderRef} className='keen-slider carousel-items'>
      {image_order.map(id => {
        const image = display_lookup[id]
        console.log(image)
        return (
          <CarouselItem key={id} image={image} />
        )
      })}
    </div>
  )
}

const CarouselItem = ({ image }) => {
  return (
    <div className='keen-slider__slide carousel-item' style={{
      backgroundImage: 'url(' + image.url + ')',
    }} />
  )
}