import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import Box, { pickBoxProps } from '../box';
import theme from './theme.css';
import Island from './Island';
import { elementIsDark } from '../utils/utils';

class IslandGroup extends PureComponent {
  render() {
    const { children, className, color, dark, direction, size, ...otherProps } = this.props;

    const boxProps = pickBoxProps(otherProps);
    const isDark = elementIsDark(color, dark);

    const classNames = cx(theme[`direction-${direction}`], theme['island-group'], className);

    return (
      <Box {...boxProps} className={classNames}>
        {React.Children.map(children, child => {
          return (
            <Island {...child.props} color={color} dark={isDark} size={size}>
              {child.props.children}
            </Island>
          );
        })}
      </Box>
    );
  }
}

IslandGroup.propTypes = {
  children: PropTypes.any,
  className: PropTypes.string,
  color: PropTypes.oneOf(['neutral', 'mint', 'violet', 'ruby', 'gold', 'aqua', 'white']),
  dark: PropTypes.bool,
  direction: PropTypes.oneOf(['horizontal', 'vertical']),
  size: PropTypes.oneOf(['small', 'medium', 'large']),
};

IslandGroup.defaultProps = {
  color: 'white',
  direction: 'horizontal',
};

export default IslandGroup;

@@ -184,87 +184,8 @@
 ss';
-%0Aimport Island from './Island';%0Aimport %7B elementIsDark %7D from '../utils/utils';
 %0A%0Acl
@@ -381,55 +381,8 @@
 ps);
-%0A    const isDark = elementIsDark(color, dark);
 %0A%0A  
@@ -598,25 +598,51 @@
      return 
-(
+React.cloneElement(child, %7B
 %0A           
@@ -646,17 +646,8 @@
     
-%3CIsland %7B
 ...c
@@ -660,66 +660,83 @@
 rops
-%7D
+,%0A           
  color
-=%7B
+: 
 color
-%7D dark=%7BisDark%7D size=%7Bsize%7D%3E%0A              %7B
+ %7C%7C child.props.color,%0A            dark: dark %7C%7C 
 chil
@@ -747,17 +747,13 @@
 ops.
-children%7D
+dark,
 %0A   
@@ -765,17 +765,39 @@
     
-%3C/Island%3E
+size: size %7C%7C child.props.size,
 %0A   
@@ -799,24 +799,25 @@
 ,%0A          
+%7D
 );%0A        %7D
@@ -1161,16 +1161,16 @@
 %5D),%0A%7D;%0A%0A
+
 IslandGr
@@ -1194,26 +1194,8 @@
 = %7B%0A
-  color: 'white',%0A
   di

refactor to make indivual Island overrides possible & to not repeat isDark logic