import React from 'react'
import { Data } from '../../models/game'
import { Carousel } from 'react-responsive-carousel'
import { Image } from '@chakra-ui/react'
import { ImmutableObject } from '@hookstate/core'

interface Props {
  game: ImmutableObject<Data>
  width: string
}

export default function ImageSlider({ game, width }: Props) {
  const { frontImage, screenshots } = game
  const newFrontImage = { id: 500, full: frontImage, thumbnail: frontImage }
  const combinedImages = [newFrontImage, ...screenshots]

  return (
    <Carousel useKeyboardArrows width={width} swipeable emulateTouch autoPlay dynamicHeight={false} showThumbs={false} autoFocus infiniteLoop interval={2000}>
      {combinedImages.map(({ id, full }) => (
        <Image key={id} borderTopRadius="md" src={full} alt="Game Image" />
      ),
      )}
    </Carousel>
  )
}
