---
import Layout from "../../layouts/Layout.astro";
import { Image } from "astro:assets";
const FLICKR_API_KEY = process.env.FLICKR_API_KEY;
const FLICKR_USER_ID = process.env.FLICKR_USER_ID;

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

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((gallery) => (
          <a
            href={`/gallery/${gallery.id}/1`}
            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">{gallery.title._content}</h2>
            <Image
              src={`https://live.staticflickr.com/${gallery.server}/${gallery.primary}_${gallery.secret}_q.jpg`}
              alt={gallery.title._content}
              width="120"
              height="120"
              class="object-cover object-center w-[120px] h-[120px]"
            />
          </a>
        ))
      }
    </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>