import { useEffect, useState } from "react";
import { getAllBooks } from "../../db";
import BookCard from "../../components/bookCard/BookCard";
function ShelvePage() {
  const [allBooks, setAllBooks] = useState([]);
  async function loadBooks() {
    let allBooks = await getAllBooks();
    setAllBooks(allBooks);
  }
  useEffect(() => {
    loadBooks();
  }, []);
  return (
    <>
      <h2>Книги, доступные оффлайн</h2>
      <div className="flex flex-wrap">
        {allBooks.length === 0 ? (
          <span>Тут ничего нет</span>
        ) : (
          allBooks.map((book) => (
            <BookCard
              key={book.id}
              id={book.id}
              authors={book.authors ? book.authors : []}
              title={book.title}
              filetype={book.filetype}
              offline
            />
          ))
        )}
      </div>
    </>
  );
}

export default ShelvePage;
