text: import React, { useContext } from "react";
  import { ReadingListContext } from "../../contexts/ReadingListContext";
  
  import { library, icon } from "@fortawesome/fontawesome-svg-core";
  import { faPlusCircle, faMinusCircle } from "@fortawesome/free-solid-svg-icons";
  import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
  
  library.add(faPlusCircle, faMinusCircle);
  
  import "./Booklist.css";
  
  const ReadingList = (props) => {
    // console.log(props);
  
    const handleMinusClick = (book) => {
      props.removeBook(book);
    };
  
    // console.log(props.books);
    return (
      <div>
        {props.readingList.map((book) => {
          // console.log(book);
          // return <BookItem book={book} mode="text" key={uuidv4()} />;
          return (
            <div className="reading-item" key={book.id}>
              <div className="reading-item-book">
                <div className="reading-item-book-title">{book.title}</div>
                <div className="reading-item-book-authors">
                  {book.authors.join(", ")}
                </div>
              </div>
              <div className="reading-item-options">
                <div
                  className="options-icon"
                  onClick={() => {
                    handleMinusClick(book);
                  }}
                >
                  <FontAwesomeIcon icon="minus-circle" />
                </div>
              </div>
            </div>
          );
        })}
      </div>
    );
  };
  
  const Booklist = () => {
    const { readingList, removeBook } = useContext(ReadingListContext);
  
    return (
      <div className="readinglist">
        <h4>Reading List</h4>
        <ReadingList readingList={readingList} removeBook={removeBook} />
      </div>
    );
  };
  
  export default Booklist;
  