import { useMemo } from 'react';

//function sortItems(items) {
//  console.log('Sortowanie');
//  return items.sort(function (a, b) {
//    if (a.id > b.id) {
//      return 1;
//    } else if (a.id < b.id) {
//      return -1;
//    }
//    return 0;
//  });
//}

function List({ items, maxNumber }) {
//  const sortedItems = sortItems(items); // Wykonywane zawsze, gdy uruchamiana jest funkcja tworząca komponent).

  // Użyj poniższego kodu i usuń funkcję sortItems() i wiersz 16., aby zoptymalizować kod.
   const sortedItems = useMemo(
     function () {
       console.log('Sortowanie');
       return items.sort(function (a, b) {
         if (a.id > b.id) {
           return 1;
         } else if (a.id < b.id) {
           return -1;
         }
         return 0;
       });
     },
     [items]
   );

  const listItems = sortedItems.slice(0, maxNumber);

  return (
    <ul>
      {listItems.map((item) => (
        <li key={item.id}>
          {item.title} (ID: {item.id})
        </li>
      ))}
    </ul>
  );
}

export default List;
