import { useState } from 'react';

const INITIAL_PRODUCTS = [
  { id: 'p1', title: 'Kurs React - kompletny przewodnik', price: 19.99 },
  { id: 'p2', title: 'Stylowe krzesło', price: 329.49 },
  { id: 'p3', title: 'Ergonomiczne krzesło', price: 269.99 },
  { id: 'p4', title: 'Kolekcja gier historycznych', price: 99.99 },
];

function App() {
  const [products, setProducts] = useState(INITIAL_PRODUCTS);

  function addProductHandler() {
    setProducts((curProducts) =>
      curProducts.concat({
        id: new Date().toString(),
        title: 'Nowy produkt',
        price: 15.99,
      })
    );
  }

  return (
    <section>
      <button onClick={addProductHandler}>Dodaj produkt</button>
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            {product.title} ({product.price} zł)
          </li>
        ))}
      </ul>
    </section>
  );
}

export default App;
