/**
*
* IKButton
*
*/

import React, { PureComponent } from 'react';


class IKButton extends PureComponent { // eslint-disable-line react/prefer-stateless-function
  static propTypes = {
    type: React.PropTypes.string,
    icon: React.PropTypes.string,
    className: React.PropTypes.string,
  };

  constructor(props) {
    super(props);
  }

  render() {
    const props = $({}, this.props);

    props.type = props.type || 'default';

    classNames = ['ikmd-btn', `ikmd-btn-${props.type}`];

    if (props.className && props.className.length > 0) {
      classNames.concat(props.className.split(' '));
    }

    let children = props.children;

    if (props.icon) {
      children = (
        <div className="ikmd-btn-icon-wrapper">
          <svg>
            <use xlinkHref={props.icon} />
          </svg>
          <p>{props.children}</p>
        </div>
      );
    }

    return (
      <button className ={classNames.join(' ')}>
        {children}
      </button>
    );
  }
}

export default IKButton;
