---
import { Image } from 'astro:assets';
import { getCollection } from 'astro:content';

const allPosts = await getCollection('posts');
const slides = allPosts
  .sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
  .slice(0, 5);
---

<div id="slider">
  <div id="slideshow" class="splide">
    <div class="splide__track">
      <ul class="splide__list">
        {slides.map((post) => (
          <li class="splide__slide">
            <a href={`/blog/${post.data.slug}`}>
              {post.data.featuredImage && (
                <Image src={post.data.featuredImage} alt={post.data.title} width={930} height={354} />
              )}
              <div class="post-slide">
                <h2>{post.data.title}</h2>
                <p>{post.data.excerpt}</p>
              </div>
            </a>
          </li>
        ))}
      </ul>
    </div>
  </div>
</div>

<script>
  import Splide from '@splidejs/splide';

  document.addEventListener('DOMContentLoaded', () => {
    const el = document.getElementById('slideshow');
    if (el) {
      new Splide(el, {
        type: 'loop',
        autoplay: true,
        interval: 5000,
        arrows: true,
        pagination: true,
        height: 354,
      }).mount();
    }
  });
</script>

<style>
  #slideshow img {
    width: 100%;
    height: 354px;
    object-fit: cover;
  }
</style>