---
import { getCollection } from "astro:content";

import Award from "../components/Award.astro";
import SectionTitle from "../components/SectionTitle.astro";
import MainLayout from "../layouts/MainLayout.astro";

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

<MainLayout title="Recognition">
  <div class="w-full">
    <section id="recognition" class="bg-white dark:bg-gray-950">
      <div class="mx-auto max-w-4xl px-8 py-16 text-justify sm:text-center">
        <SectionTitle>Awards and Recognition</SectionTitle>
        <div class="space-y-8">
          {
            awards.map((award) => {
              return <Award award={award} />;
            })
          }
        </div>
      </div>
    </section>
  </div>
</MainLayout>
