{"size": 814, "ext": "js", "max_stars_repo_path": "src/ContentBlocks/BlockCarousel/BlockCarousel.js", "max_stars_repo_name": "karatechops/brand-central-content-blocks", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/ContentBlocks/BlockCarousel/BlockCarousel.js", "max_issues_repo_name": "karatechops/brand-central-content-blocks", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/ContentBlocks/BlockCarousel/BlockCarousel.js", "max_forks_repo_name": "karatechops/brand-central-content-blocks", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 27.1333333333, "max_line_length": 71, "alphanum_fraction": 0.683046683}
import React, { PropTypes } from 'react';
import Box from 'grommet/components/Box';
import Image from 'grommet/components/Image';
import Carousel from 'grommet/components/Carousel';

export default function BlockCarousel({ carousel, imageSize }) {
  const size = imageSize ? imageSize.toLowerCase() : 'large';
  // TODO: refactor to use grommet sizes vs. custom css
  const slides = carousel.map((slide, index) => (
    <Image
      src={slide.image.path}
      alt={`Carousel slide ${index}`}
      className={`grommet-cms-content-blocks--carousel-slide__${size}`}
    />
    ));

  return (
    <Carousel autoplay={false}>
      {slides}
    </Carousel>
  );
}

BlockCarousel.propTypes = {
  carousel: PropTypes.array,
  imageSize: PropTypes.string,
  headline: PropTypes.string,
  content: PropTypes.string,
};
