---
import { authPB } from "@utils/pocketbase"
const { a } = Astro.props
const pb = await authPB()
---

<div class="swiper-slide flex flex-col md:flex-row items-center justify-center">
    <a class="b1-no-underline" href={`/albums/${encodeURI(a.title)}`}>
        <h1 class="text-center pb-0 md:flex-1">{a.title}</h1>
        <p class="text-center">{a.date}</p>
        <img 
            src={pb.files.getURL(a, a.images[0])} 
            class="w-full h-full object-contain"
            loading="lazy"
            alt={a.title}
        />
    </a>
</div>