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

// Extract smaller child components from this large App component
// Consider:
// - Reusability (is the same code repeated?)
// - Complexity (is there too much information being contained within one component?)
// - Single Responsibility (what is this part of code meant to do?)
class App extends React.Component {
  
  render() {
    return (
      <div>
        <header>
          <h3>PetLand</h3>
          <nav>
            <button>
              <span role="img">👤</span>
              Login
            </button>
          </nav>
        </header>
        <main>
          <div className="card">
            <h3>Welcome to PetLand!</h3>
            <em>Find your dream pet</em>
          </div>
          <div className="card">
            <h4>What pets would you like to see?</h4>
            <div>
              <button>
                <span role="img">😸</span>
                Cats
              </button>
              <button>
                <span role="img">🐕</span>
                Dogs
              </button>
            </div>
          </div>
        </main>
      </div>
    );
  }
}

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