import { Book } from '@/books/Book';
import FavoriteButton from '@/books/FavoriteButton';
import { NextPage } from 'next';

const BooksPage: NextPage = async () => {
  const response = await fetch('http://localhost:3001/books');
  const books = (await response.json()) as Book[];

  return (
    <div>
      <h1>Books</h1>
      <div>
        {books.map((book) => (
          <div key={book.id}>
            <h2>{book.title}</h2>
            <p>by {book.author}</p>
            <p>ISBN: {book.isbn}</p>
            <div>
              <FavoriteButton favorite={book.favorite} id={book.id} />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default BooksPage;

export const dynamic = 'force-dynamic';
