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

import './blocks-wrapper.scss';

const PropTypeColumns = PropTypes.oneOf(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']);

const propTypes = {
  /** @ignore */
  className: PropTypes.string,
  xs: PropTypeColumns,
  sm: PropTypeColumns,
  md: PropTypeColumns,
  lg: PropTypeColumns
};
const defaultProps = {
  className: undefined,
  xs: null,
  sm: null,
  md: null,
  lg: null
};

const BlocksWrapper = ({ className, xs, sm, md, lg, ...props }) => (
  <div
    className={className}
    styleName={classNames('base', {
      [`x-small-${xs}`]: xs,
      [`small-${sm || xs}`]: sm || xs,
      [`medium-${md || sm || xs}`]: md || sm || xs,
      [`large-${lg || md || sm || xs}`]: lg || md || sm || xs
    })}
    {...props}
  />
);

BlocksWrapper.propTypes = propTypes;
BlocksWrapper.defaultProps = defaultProps;

export default BlocksWrapper;
