<script setup lang="ts">
import { formatDate } from "@vueuse/core";

definePageMeta({
  layout: "content",
});

const articles = useAsyncData("articles", async () => {
  return queryCollection("articles").order("date", "DESC").all();
});
</script>

<template>
  <UContainer v-motion-fade class="prose dark:prose-invert">
    <h1>Articles</h1>
  </UContainer>

  <UContainer v-motion-fade :delay="500" class="grid grid-cols-12 gap-8">
    <UCard
      class="col-span-12 md:col-span-6"
      :ui="{ body: { padding: '' } }"
      v-for="article in articles.data.value"
    >
      <div class="grid gap-4 pb-4 md:pb-6">
        <NuxtImg
          class="rounded-t-lg cursor-pointer"
          :src="article.coverImage.url"
          @click="navigateTo(article.path)"
        />
        <div class="w-full px-4 md:px-6">
          <NuxtLink
            :to="article.path"
            class="font-semibold line-clamp-2 min-h-12"
            >{{ article.title }}</NuxtLink
          >
          <div class="text-sm text-slate-500">
            {{ formatDate(new Date(article.date), "Do of MMMM YYYY") }}
          </div>
        </div>

        <div class="w-full px-4 md:px-6">
          <UButton variant="soft" color="gray" :to="article.path"
            >Read article</UButton
          >
        </div>
      </div>
    </UCard>
  </UContainer>

  <Footer v-motion-fade :delay="500" />
</template>
