<div id="app"></div>

body {
  font-family: Arial, sans-serif;
  text-align: center;
}

ul {
  list-style-type: none;
}

li {
  display: flex;
  flex-direction: column;
}

li img {
  height: 130px;
  width: 130px;
  align-self: center;
}

li label {
  margin-bottom: 1rem;
  font-size: 18px;
}

function getRickAndMortyData() {
  const [info, setInfo] = React.useState({ characters: [] });
  
  const apiUrl = `https://rickandmortyapi.com/api/character`
  
  React.useEffect(() => {
    fetch(apiUrl)
      .then((res) => res.json())
      .then((data) => {
        setInfo({characters: data.results})
      })
      .catch((error) => console.error("There's been an error " + error))
  }, []);

  return info;
}

function Characters({ characters }) {
  return (
    <ul>
      {characters.map((character) => (
        <li key={character.id} className="">
          <img src={character.image} alt="character picture" />
          <label>{character.name}</label>
        </li>
      ))}
    </ul>
  )
}

function Header() {
  return (
    <header>
      <h1>Rick and Morty characters</h1>
    </header>
  )
}

function App() {
  const data = getRickAndMortyData();
  
  return (
    <div>
      <Header />
      <main>
        <Characters characters={data.characters}/>
      </main>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById("app"));