import React , { useState, useEffect } from 'react';
import './components/card-list/card-list.component';
import './App.css';
import { CardList } from './components/card-list/card-list.component';
import {SearchBox} from './components/search-box/search-box.component';

const App = () => {
  const [monsters, setMonsters] = useState([]);
  const [searchField, setSearchField] = useState('');

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
    .then(response => response.json())
    .then(users => setMonsters(users))
  });

  const handleChange = e => {
    setSearchField(e.target.value);
  };

  const filterMonster = monsters.filter(
    monster => monster.name.toLowerCase().includes(searchField.toLowerCase()
  ));

  return (
    <div className="App">
        <h1> Monster Rolodex </h1>
        <SearchBox 
          placeholder='Search monster'
          handleChange = {handleChange}
        />
        <CardList monsters={filterMonster} />
    </div>
  );
};

export default App;