---
import SectionContainer from '../../components/SectionContainer.astro';
import books from '../../data/biblioteca.json'

const booksByYear = books.reduce((acc:any, book) => {
    const year = new Date(book.date.string).getFullYear();
    if (!acc[year]) {
        acc[year] = [];
    }
    acc[year].push(book);
    return acc;
}, {});

const sortedYears = Object.keys(booksByYear).sort((a:any, b:any) => b - a);

/*
function getEmojiStars(rating:any) {
    let stars = '';
    for (let i = 0; i < rating; i++) {
        stars += '⭐';
    }
    return stars;
}
*/

function getHeartEmoji(rating:any) {
  let heart = '';
  if (rating == 5) heart = "❤️";
  return heart;
}

const today = new Date();
---
<SectionContainer>
    <main class="flex flex-col gap-4 mt-4">
		<h1 class="text-3xl font-extrabold">📚 ¿Dónde está la biblioteca?</h1>
    <h2 class="text-xl font-semibold">on the shelf</h2>
    <ul class="flex flex-col text-s gap-2 text-l">
      <li class="borderbottom">📚 Dune</li>
      <li class="borderbottom">📚 The Summit of The Gods: Vol.3 - Vol.5</li>
      <li class="borderbottom">📚 Star Wars: The Tales of Kenobi</li>
    </ul>
		<h2 class="text-xl font-semibold">on the nightstand</h2>
        <p class="borderbottom">📖 The Intelligent Investor (NO)</p>
    {sortedYears.map(year => (
			<section>
				<div class="flex items-center gap-2 text-xl font-semibold mb-2">{year}<p class="text-xs">({booksByYear[year].length} entries)</p></div>
				<ul>
                    {
                        booksByYear[year].map((book) => (
                            <div class="flex justify-between mb-2 break-words gap-2 borderbottom">
								<p class="text-s">{book.title}</p>
                                <p>{getHeartEmoji(book.my_rating)}</p>
							</div>
                        ))
                    }
                </ul>
        </section>
		))
        }
	</main>
</SectionContainer>