---
import CharacterList from "../../layouts/CharacterList.astro";
import pb from "../../lib/pb";
import Card from "../../components/Card.astro";

const characters = await pb
  .collection("characters")
  // @ts-ignore
  .getFullList({ expand: ["icon"], filter: `(hidden = false)` });

export const prerender = false;
---

<CharacterList>
  <div class="flex flex-col">
    <h1 class="text-3xl text-center pt-8">Characters</h1>
    <div
      class="grid grid-cols-2 xl:grid-cols-4 gap-4 columns-2 md:columns-4 self-center p-4"
    >
      {
        [...characters].map((c) => (
          // @ts-ignore
          <Card
            href={`/characters/${c.slug}`}
            image={c.expand ? c.expand.icon : null}
            title={c.name}
            body={c.body}
          />
        ))
      }
    </div>
  </div>
</CharacterList>