import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import Box from '../box';
import WidgetBody from './WidgetBody';
import WidgetFooter from './WidgetFooter';
import WidgetHeader from './WidgetHeader';
import cx from 'classnames';
import theme from './theme.css';

const SIZES = {
  small: 3,
  medium: 4,
  large: 5,
};

class Widget extends PureComponent {
  render() {
    const { children, size, ...others } = this.props;

    return (
      <Box className={cx(theme['widget'])} {...others}>
        {React.Children.map(children, child => {
          return React.cloneElement(child, {
            padding: SIZES[size],
            ...child.props,
          });
        })}
      </Box>
    );
  }
}

Widget.propTypes = {
  /** The content to display inside the widget. */
  children: PropTypes.node,
  size: PropTypes.oneOf(Object.keys(SIZES)),
};

Widget.defaultProps = {
  size: 'medium',
};

Widget.WidgetBody = WidgetBody;
Widget.WidgetFooter = WidgetFooter;
Widget.WidgetHeader = WidgetHeader;

export default Widget;

@@ -295,20 +295,23 @@
 %0A%0Aconst 
-SIZE
+PADDING
 S = %7B%0A  
@@ -638,20 +638,23 @@
 adding: 
-SIZE
+PADDING
 S%5Bsize%5D,
@@ -835,16 +835,90 @@
 s.node,%0A
+  /** The size wich controls the paddings passed down to our children. */%0A
   size: 
@@ -949,12 +949,15 @@
 eys(
-SIZE
+PADDING
 S)),

Update PropType description and change to a better name