import React, { Component } from 'react';
import './index.less';
import Touch from '@src/containers/Touch';

export default class Button extends Component {
  render() {
    const {
      className = '',
      width,
      margin,
      size = 'basic',
      theme = 'default',
      children,
      onClick,
      radius,
      block,
      disabled,
    } = this.props;
    return (
      <div
        className={`g-button-wrapper ${className} ${size} ${theme} ${radius ? 'radius' : ''} ${block ? 'block' : ''} ${
          disabled ? 'disabled' : ''
        }`}
        onClick={() => onClick && onClick()}
      >
        <Touch
          style={{ width: width || 'auto', margin: margin ? `0 ${margin}px` : '0 auto' }}
          className="g-button"
        >
          {children}
        </Touch>
      </div>
    );
  }
}