import { useState } from 'react';

import List from './components/List';

const DUMMY_ITEMS = [
  {
    id: 5,
    title: 'Książka',
  },

  {
    id: 53,
    title: 'Gra komputerowa',
  },
  {
    id: 1,
    title: 'Dywan',
  },
  {
    id: 10,
    title: 'Film',
  },
  {
    id: 4,
    title: 'Koszula',
  },
];

function App() {
  const [maxNumberOfItems, setMaxNumberOfItems] = useState(3);

  function updateMaxNumHandler(event) {
    setMaxNumberOfItems(event.target.value);
  }

  return (
    <>
      <div>
        <label htmlFor="max">Maksymalna liczba elementów</label>
        <input
          type="number"
          id="max"
          onChange={updateMaxNumHandler}
          value={maxNumberOfItems}
        />
      </div>
      <List items={DUMMY_ITEMS} maxNumber={maxNumberOfItems} />
    </>
  );
}

export default App;
