import { FaBookmark, FaRegBookmark } from 'react-icons/fa';

import dummyArticles from '../../data/dummy-articles';
import classes from './Articles.module.css';

function Articles({
  bookmarkedArticles,
  onBookmarkArticle,
  onUnbookmarkArticle,
}) {
  return (
    <ul className={classes.list}>
      {dummyArticles.map((article) => {
        // Ma wartość true, jesli dany artykuł znajduje się już w tablicy bookmarkedArticles.
        const isBookmarked = bookmarkedArticles.some(
          (bArticle) => bArticle.id === article.id
        );

        // Domyślna operacja przycisku => zapisanie artykułu za pomocą zakładki, ponieważ nie jest zapisany.        
        let buttonAction = () => onBookmarkArticle(article);
      
        // Domyślna ikona przycisku - ikona pustej zakładki, ponieważ artykuł nie jest zapisany.
        let buttonIcon = <FaRegBookmark />;

        if (isBookmarked) {
          buttonAction = () => onUnbookmarkArticle(article.id);
          buttonIcon = <FaBookmark />;
        }

        return (
          <li key={article.id}>
            <h2>{article.title}</h2>
            <p>{article.description}</p>
            <button onClick={buttonAction}>{buttonIcon}</button>
          </li>
        );
      })}
    </ul>
  );
}

export default Articles;
