---
import { getCollection } from "astro:content";
import Layout from "@layouts/Layout.astro";
import Container from "@components/Container.astro";
import { RESEARCH } from "@consts";
import PublicationCard from "@components/PublicationCard.astro";
// import PublicationCard from "@components/PublicationCard";

const publications = (await getCollection("publications"))
  .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
---

<Layout title={RESEARCH.TITLE} description={RESEARCH.DESCRIPTION}>
  <Container>
    <aside data-pagefind-ignore>
      <div class="space-y-10">
        <div class="animate font-semibold text-black dark:text-white">
          Research
        </div>
        <ul class="animate not-prose flex flex-col gap-4">
          {
            publications.map((publication) => (
              <li>
                <PublicationCard entry={publication} />
              </li>
            ))
          }
        </ul>
      </div>
    </aside>
  </Container>
</Layout>