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

import './section-column.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,
  component: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.object,
    PropTypes.func
  ])
};
const defaultProps = {
  className: undefined,
  xs: null,
  sm: null,
  md: null,
  lg: null,
  component: 'div'
};

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

Column.propTypes = propTypes;
Column.defaultProps = defaultProps;

export default Column;
