---
import Layout from "../layouts/Layout.astro";
import { getCollection } from 'astro:content';

// Fetch all entries from the 'books' collection
const allBooks = await getCollection('books');

---

<Layout>
  <h1 class="text-3xl font-bold mb-6 text-center">My Book List</h1>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-4">
    {allBooks.map(book => (
      <div class="bg-white rounded-lg shadow-lg p-6 flex flex-col items-center text-center">
        <img 
          src={book.data.cover} 
          alt={`${book.data.title} cover`} 
          class="w-40 h-56 object-cover mb-4 rounded-md border shadow-md" 
        />
        <h2 class="text-2xl font-bold text-gray-800 mb-1">{book.data.title}</h2>
        <p class="text-md text-gray-700 mb-1">by {book.data.author} ({book.data.year})</p>
        <p class="text-sm text-gray-500 mb-3">{book.data.genre} • Rating: {book.data.rating}/5</p>
        {/* Accessing the Markdown body for the description */}
        <p class="text-gray-600 text-sm">{book.body}</p> 
      </div>
    ))}
  </div>
</Layout>