import React from 'react';
import Img from 'gatsby-image';
import { Box } from '@rebass/emotion';

import { FluidContainer } from 'utils/styles/mixins';

import { MultiImageModuleProps } from '../multi-image-module.types';
import StyledCarousel from 'components/styled-carousel';

const CarouselSlider = ({ data }: MultiImageModuleProps): JSX.Element => (
  <FluidContainer>
    <StyledCarousel>
      {
        data.images.map((image, index) => (
          <Box p="10px" key={image.id}>
            <Img key={index} fluid={image.fluid} />
          </Box>
        ))
      }
    </StyledCarousel>
  </FluidContainer>
);

export default CarouselSlider;