class Button extends React.Component {
  static propTypes = {
    children: PropTypes.node.isRequired,
    color: PropTypes.string,
  }

  constructor(props){
    super(props)
  };
   
  render() {
    const {children,color,disable, round} = this.props
    
    const btnColorClass = (color ) ? `button--${color}` : 'button--default'
    const disabledClass = (disable) ? 'button--disabled' : ''
    const roundClass = (round) ? 'button--round' :  ''
    
    const btnClasses = `${btnColorClass} ${disabledClass} ${roundClass}`
    return (
      <button className={`button ${btnClasses}`} disabled={disable}>
        {children}
      </button>
    )
  }
}

const BtnContainer = ({title,colClass,children}) => {
  return(
    <div className='buttons-container'>
      <h2>{title}</h2>
      <div className={`buttons-wrapper  ${colClass}`}>
        {children}
      </div>
    </div>
  )
}

class App extends React.Component {

  render() {
    return (
      <div className="app">
        <BtnContainer title='Default Color Buttons' colClass='four-cols'>
          <Button>Ciao</Button>
          <Button color='primary' > Primary </Button>
          <Button color='secondary' > Secondary </Button>
          <Button color='alert' > Alert </Button>
          <Button disable>Ciao</Button>
          <Button color='primary' disable> Primary </Button>
          <Button color='secondary' disable> Secondary </Button>
          <Button color='alert' disable> Alert </Button>
        </BtnContainer>
        
        <BtnContainer title='Round Buttons' colClass='three-cols'>
          <Button color='primary' round > + </Button>
          <Button color='secondary' round > = </Button>
          <Button color='alert' round > - </Button>
          <Button color='primary' round disable> + </Button>
          <Button color='secondary' round disable> = </Button>
          <Button color='alert' round disable> - </Button>
        </BtnContainer>
        
        
      </div>
    )
  }
}

ReactDOM.render(<App/>,document.getElementById('app'))