import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import './card-section.scss';

const CardSection = ({ className, children, colorVariant, horizontal, size, ...rest }) => (
  <div
    className={className}
    styleName={classNames('section', size)}
    {...rest}
  >
    {
      React.Children.map(children,
        child => {
          if (!React.isValidElement(child)) {
            return child;
          }

          return React.cloneElement(child, {
            colorVariant,
            horizontal,
            size,
            section: true
          });
        }
      )
    }
  </div>
);

CardSection.propTypes = {
  /** @ignore */
  className: PropTypes.string,
  /** @ignore */
  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
  colorVariant: PropTypes.oneOf(['grey', 'white']),
  horizontal: PropTypes.bool,
  size: PropTypes.string
};

CardSection.defaultProps = {
  className: undefined,
  children: null,
  colorVariant: 'grey',
  horizontal: false,
  size: null
};

CardSection.componentName = 'CardSection';

export default CardSection;
