'use strict';


class Label1 extends React.Component{
  constructor(props){
    super(props);
    this.className='plain-label';
  }
   render(){
     return <span className={this.className}>
        {this.props.children} 
      </span>
   }
}

class SuccessLabel extends Label1{
  constructor(props){
    super(props);
    this.className = this.className + ' success-label';
  }
}

class SuccessLabelWithIcon extends Label1{
  constructor(props){
    super(props);
    this.className = this.className + ' success-label';
  }
  render(){
    return <div>
          {super.render()}<span>&#9650;</span>
     </div>
  }
}
class ErrorLabel extends Label1{
  constructor(props){
    super(props);
    this.className = this.className + ' error-label';
  }
}






class Label2 extends React.Component{

   render(){
     return <span className={this.props.className + ' plain-label'}>
        {this.props.children} 
      </span>
   }
}

class ComposeSuccessLabel extends React.Component{
  
  render(){
    return <Label2 className='success-label'>{this.props.children}</Label2>;  
  }
}

class ComposeErrorLabel extends React.Component{
  
  render(){
    return <Label2 className='error-label'>{this.props.children}</Label2>;  
  }
}
class ComposeSuccessLabelWithIcon extends React.Component{
 render(){
     return <div>
      <Label2 className='success-label'>{this.props.children}<span>&#9650;</span></Label2>
     </div>
  } 
}




/*
 * A simple React component
 */
class Application extends React.Component {
  render() {
    return <div>
      <h1> Extending React Components </h1>
      <h3> Inheritance </h3>
      <Label1> Plain Label </Label1>
      <hr/>
      <SuccessLabel> Success Label </SuccessLabel>
      <hr/>
      <ErrorLabel> Error Label </ErrorLabel>
      <hr/>
      <SuccessLabelWithIcon> Success Label with Icon </SuccessLabelWithIcon>
      <h3>Composition (Favored)</h3>
      <Label2>Plain Label</Label2>
            <hr/>
      <ComposeSuccessLabel>SuccessLabel</ComposeSuccessLabel>
            <hr/>
       <ComposeErrorLabel>ErrorLabel</ComposeErrorLabel>
      <hr/>
            <ComposeSuccessLabelWithIcon>SuccessLabel With Icon</ComposeSuccessLabelWithIcon>
      

    </div>;
  }
}

/*
 * Render the above component into the div#app
 */
ReactDOM.render(<Application />, document.getElementById('app'));