---
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"] });
---

<CharacterList>
  <div class="flex flex-col">
    <h1 class="text-2xl text-center p-8">Characters</h1>
    <div class="flex gap-4 columns-2 md:columns-4 self-center">
      {
        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>