---
import Layout from "../../layouts/Layout.astro";
import { Image } from "astro:assets";

export const getStaticPaths = async ({ paginate }) => {
  const FLICKR_API_KEY = process.env.FLICKR_API_KEY;
  const FLICKR_USER_ID = process.env.FLICKR_USER_ID;
  const allPhotos = await fetch(
    `https://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=${FLICKR_API_KEY}&user_id=${FLICKR_USER_ID}&photoset_id=72177720310416326&format=json&nojsoncallback=1`,
  )
    .then((data) => data.json())
    .then((data) => data.photoset.photo);
  console.log(paginate(allPhotos, { pageSize: 6 }));
  return paginate(allPhotos, { pageSize: 6 });
};

const { galleryID } = Astro.params;
const { page } = Astro.props;
---

<Layout pageName="gallery" title="Galleria">
  <div
    class="wrapper bg-white bg-opacity-70 w-[97%] mx-auto p-4 box-border rounded flex fex-col items-center flex-wrap"
  >
    <h1 class="text-center text-bold text-4xl w-full">Galleria</h1>
    <div class="gallery flex fex-row justify-between flex-wrap">
      {
        page.data.map((photo: any) => (
          <div class="w-[46%] pb-2 my-4 mx-1 h-46 bg-white flex flex-col rounded justify-between items-center">
            <h2 class="text-center">{photo.title._content}</h2>
            <Image
              src={`https://live.staticflickr.com/${photo.server}/${photo.primary}_${photo.secret}_q.jpg`}
              alt={photo.title._content}
              width="120"
              height="120"
              class="object-cover object-center w-[120px] h-[120px]"
            />
          </div>
        ))
      }
    </div>
    <div class="navigation flex flex-row justify-between w-full">
      {
        page.currentPage > 1 && (
          <a href={page.url.prev} class="text-center text-bold text-2xl">
            Precedente
          </a>
        )
      }
      {
        page.currentPage < page.total - 6 && (
          <a href={page.url.next} class="text-center text-bold text-2xl">
            Successivo
          </a>
        )
      }
    </div>
  </div>
</Layout>