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

const SIZES = {
  medium: {
    paddingHorizontal: 2,
    paddingVertical: 1,
  },
  small: {
    paddingHorizontal: 2,
  },
};

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

    const classNames = cx(theme['label'], theme[color], theme[size], className);

    return (
      <Box className={classNames} element="span" {...SIZES[size]} {...others} data-teamleader-ui="status-label">
        {children}
      </Box>
    );
  }
}

StatusLabel.propTypes = {
  children: PropTypes.any.isRequired,
  className: PropTypes.string,
  color: PropTypes.oneOf(['neutral', 'mint', 'violet', 'ruby', 'gold', 'aqua']),
  size: PropTypes.oneOf(Object.keys(SIZES)),
};

StatusLabel.defaultProps = {
  color: 'neutral',
  size: 'medium',
};

export default StatusLabel;

@@ -707,74 +707,273 @@
 %7B%0A  
-children: PropTypes.any.isRequired,%0A  className: PropTypes.string,
+/** The content to display inside the status label */%0A  children: PropTypes.any.isRequired,%0A  /** A classname to add to the status label to give custom styles */%0A  className: PropTypes.string,%0A  /** The name of the color them you want to give to the status label */
 %0A  c
@@ -1050,16 +1050,44 @@
 qua'%5D),%0A
+  /** Size of the button */%0A
   size: 

add descriptions to the status label proptypes