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 EmojiButton(props) {
  console.log(props)
  return (
    <button>
      <span role="img">{props.emoji}</span>
      {props.labelText}
    </button>
  )
}

function Header() {
  return (
    <header>
      <h1>PetLand</h1>
      <nav>
        <EmojiButton emoji="👤" labelText="Login" />
      </nav>
    </header>
  )
}

function HomePage() {
  return (
    <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>
          <EmojiButton emoji="😸" labelText="Cats" />
          <EmojiButton emoji="🐕" labelText="Dogs" />
        </div>
      </div>
    </main>
  )
}
 
function App() {
  return (
    <div>
      <Header />
      <HomePage />
    </div>
  );
}

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