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

// Extract smaller child components from this large App component
// Consider:
// - Single Responsibility (what is this part of code meant to do?)
// - Reusability (is the same code repeated?)
// - Complexity (is there too much information being contained within one component? this is subjective!)

function App() {
  return (
    <div>
      <header>
        <h1>PetLand</h1>
        <nav>
          <button>
            <span role="img">👤</span>
            Login
          </button>
        </nav>
      </header>
      <main>
        <div className="card">
          <h2>Welcome to PetLand!</h2>
          <em>Find your dream pet</em>
        </div>
        <div className="card">
          <h2>What pets would you like to see?</h2>
          <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'));