import React, { PropTypes } from 'react';
import Box from 'grommet/components/Box';
import Carousel from 'grommet/components/Carousel';

export default function BlockCarousel({ carousel, imageSize }) {
  const size = imageSize ? imageSize.toLowerCase() : 'large';
  const slides = carousel.map((slide, index) => {
    const sizeObject = size === 'full' ? 'full' : {
      height: size,
      width: size,
    };
    return (
      <Box
        key={`slide-${index}`}
        size={sizeObject}
        full={size === 'full' ? true : ''}
        className={size === 'full'
          ? 'grommet-cms-content-blocks--carousel-slide__full'
          : 'grommet-cms-content-blocks--carousel-slide'
        }
        texture={slide.image.path}
      />
    );
  });

  return (
    <Box full={size === 'full' ? true : ''} size={size}>
      <Carousel>
        {slides}
      </Carousel>
    </Box>
  );
}

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

@@ -77,16 +77,62 @@
 s/Box';%0A
+import Image from 'grommet/components/Image';%0A
 import C
@@ -309,153 +309,111 @@
 ;%0A  
-const slides = carousel.map((slide, index) =%3E %7B%0A    const sizeObject = size === 'full' ? 'full' : %7B%0A      height: size,%0A      width: size,%0A    %7D;
+// TODO: refactor to use grommet sizes vs. custom css%0A  const slides = carousel.map((slide, index) =%3E %7B
 %0A   
@@ -429,19 +429,21 @@
 %0A      %3C
-Box
+Image
 %0A       
@@ -447,393 +447,179 @@
     
-key
+src
 =%7B
-%60
 slide
--$%7Bindex%7D%60%7D%0A        size=%7BsizeObject%7D%0A        full=%7Bsize === 'full' ? true : ''%7D%0A        className=%7Bsize === 'full'%0A          ? 'grommet-cms-content-blocks--carousel-slide__full'%0A          : 'grommet-cms-content-blocks--carousel-slide'%0A        %7D%0A        texture=%7Bslide.image.path%7D%0A      /%3E%0A    );%0A  %7D);%0A%0A  return (%0A    %3CBox full=%7Bsize === 'full' ? true : ''%7D size=%7Bsize%7D%3E%0A  
+.image.path%7D%0A        alt=%7B%60Carousel slide $%7Bindex%7D%60%7D%0A        className=%7B%60grommet-cms-content-blocks--carousel-slide__$%7Bsize%7D%60%7D%0A      /%3E%0A    );%0A  %7D);%0A%0A  return (%0A
     
@@ -635,18 +635,16 @@
 %3E%0A      
- 
- 
 %7Bslides%7D
@@ -644,18 +644,16 @@
 slides%7D%0A
-  
     %3C/Ca
@@ -664,19 +664,8 @@
 el%3E%0A
-    %3C/Box%3E%0A
   );
@@ -813,13 +813,12 @@
 s.string
-,
 %0A%7D;%0A

update carousel to adjust height to image using custom css