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

class Message extends PureComponent {
  static propTypes = {
    className: PropTypes.string,
    children: PropTypes.any.isRequired,
    image: PropTypes.element,
    imagePositioning: PropTypes.oneOf(['center', 'left', 'right']),
    button: PropTypes.element,
    link: PropTypes.element,
  };

  static defaultProps = {
    imagePositioning: 'left',
  };

  render() {
    const { className, children, image, imagePositioning, button, link, ...others } = this.props;

    const classNames = cx(theme['message'], theme[`is-image-${imagePositioning}`], className);
    const hasAction = Boolean(button || link);

    return (
      <Box data-teamleader-ui="message" className={classNames} {...others}>
        {image && <div className={theme['image']}>{image}</div>}
        <div className={theme['content']}>
          {children}
          {hasAction && (
            <ButtonGroup className={theme['actions']} marginTop={4}>
              {button && <span className={theme['button']}>{button}</span>}
              {link}
            </ButtonGroup>
          )}
        </div>
      </Box>
    );
  }
}

export default Message;

@@ -1162,13 +1162,36 @@
  && 
-%3Cspan
+React.cloneElement(button, %7B
  cla
@@ -1192,26 +1192,26 @@
  %7B className
-=%7B
+: 
 theme%5B'butto
@@ -1217,25 +1217,11 @@
 on'%5D
-%7D%3E%7Bbutton%7D%3C/span%3E
+ %7D)
 %7D%0A  

Drop the wrapper, clone the element and apply the class instead