---
// import type { GetStaticPaths } from "astro";
import Gallery from "../../layouts/Gallery.astro";
import Image from "../../components/Image.astro";
import pb from "../../lib/pb";
export async function getStaticPaths() {
  const paths = await pb
    .collection("characters")
    .getFullList({
      sort: "-created",
    })
    .then((r) => r);

  // console.log(paths);

  return paths.map(({ slug }) => {
    return {
      params: { slug },
    };
  });
}

const { slug } = Astro.params;

const imageCollection = await pb.collection("images").getFullList({
  sort: "-created",
  filter: `(character.slug~"${slug}")`,
});
const characterDetails = await pb
  .collection("characters")
  .getFirstListItem(`(slug~"${slug}")`);
// console.log(characterDetails);
const images = imageCollection.map((record) => {
  const url = pb.files.getUrl(record, record.file);
  return {
    url: url,
    desc: record.description,
    nsfw: record.nsfw,
  };
});

export const prerender = true;
---

<Gallery>
  <div class="flex flex-col">
    <div class="pb-4">
      <h1 class="text-2xl text-center p-8">
        <a href={`/characters`}>
          {characterDetails.name}
        </a>
      </h1>
      {
        characterDetails.description && (
          <Fragment
            class="text-xl p-8"
            set:html={characterDetails.description}
          />
        )
      }
    </div>
    <div class="gap-4 columns-2 md:columns-4 self-center">
      {
        images.map((image) => (
          <Image nsfw={image.nsfw} src={image.url} alt={image.desc} />
        ))
      }
    </div>
  </div>
</Gallery>

<!-- <style>
</style> -->