---
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";

const articles = await getCollection("blog");
---

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

      <Paragraph>
        Sometimes I write about technology, programming, software, or other
        things that interests me.
      </Paragraph>

      <section class="sm:max-w-2xl">
        {
          articles
            .sort((p2, p1) => p1.data.date.getTime() - p2.data.date.getTime())
            .map(async (article) => {
              const { slug, data } = article;
              const { image, intro } = data;
              const { headings } = await article.render();
              const title = headings[0].text;
              return (
                <a
                  href={`/articles/${slug}`}
                  class="group mx-auto my-8 grid max-w-xs grid-cols-1 overflow-hidden rounded-lg bg-white shadow duration-100 hover:translate-x-1 hover:shadow-md sm:max-w-none sm:grid-cols-3"
                >
                  <Image
                    src={image}
                    alt={title}
                    class="col-span-1 h-48 object-cover sm:h-full"
                  />

                  <div class="col-span-1 px-4 py-5 sm:col-span-2">
                    <h2 class="mb-2 font-serif text-xl text-gray-700 underline-offset-4 group-hover:underline sm:line-clamp-1">
                      {title}
                    </h2>

                    <p class="text-gray-500 sm:line-clamp-3">{intro}</p>
                  </div>
                </a>
              );
            })
        }
      </section>
    </TextContentLayout>
  </ContainerLayout>
</BaseLayout>
