import React from 'react';
import ReactDOM from 'react-dom';

class EmojiButton extends React.Component {
  
  render() {
    return (
      <button>
        <span role="img">{this.props.emoji}</span>
        {this.props.label}
      </button>
    )
  }
}

class Header extends React.Component {
  
  render() {
    return (
      <header>
        <h3>PetLand</h3>
        <nav>
          <EmojiButton emoji="👤" label="Login" />
        </nav>
      </header>
    )
  }
}

class Card extends React.Component {
  
  render() {
    return (
      <div className="card">
        <h3>{this.props.title}</h3>
        {this.props.children}
      </div>
    ) 
  }
}

class App extends React.Component {
  
  render() {
    return (
      <div>
        <Header />
        <main>
          <Card title="Welcome to PetLand!">
            <em>Find your dream pet</em>
          </Card>
          <Card title="What pets would you like to see?">
            <div>
              <EmojiButton emoji="😸" label="Cats" />
              <EmojiButton emoji="🐕" label="Dogs" />
            </div>
          </Card>
        </main>
      </div>
    );
  }
}

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