---
import { Image } from "astro:assets";
import Paragraph from "@components/Paragraph.astro";
import ContainerLayout from "@layouts/ContainerLayout.astro";
import BaseLayout from "@layouts/BaseLayout.astro";
import TextContentLayout from "@layouts/TextContentLayout.astro";
import { getCollection } from "astro:content";
import HeadContent from "@components/HeadContent.astro";

const projects = await getCollection("programming");
---

<BaseLayout>
  <HeadContent slot="head" title="Programming" />

  <ContainerLayout>
    <TextContentLayout>
      <h1
        class="mb-8 text-center font-serif text-3xl font-light tracking-wide text-gray-600 sm:text-4xl"
      >
        Programming projects
      </h1>

      <Paragraph>
        I'm quite into programming and web development. When I have time on my
        hands I like to dabble with personal projects. Here are some of them.
      </Paragraph>
    </TextContentLayout>

    <section
      class="mx-auto mt-12 grid max-w-xs grid-cols-1 justify-center gap-8 sm:max-w-2xl sm:grid-cols-2 lg:max-w-none lg:grid-cols-3"
    >
      {
        projects
          .sort((p2, p1) => p1.data.date.getTime() - p2.data.date.getTime())
          .map(({ data, id }) => (
            <a
              href={`/programming/${id}`}
              class="mx-auto overflow-hidden rounded-lg bg-white pb-8 shadow-md duration-100 hover:-translate-y-1 hover:shadow-lg"
            >
              <Image
                src={data.image}
                alt={data.title}
                width={1000}
                height={500}
              />

              <h2 class="mx-4 mt-6 text-center text-2xl text-gray-700">
                {data.title}
              </h2>

              <p class="mx-4 mt-4 text-center text-lg text-gray-600">
                {data.description}
              </p>
            </a>
          ))
      }
    </section>
  </ContainerLayout>
</BaseLayout>