<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-6" v-for="article in articles.data.value">
      <div class="grid gap-4">
        <NuxtImg
          class="rounded rounded-lg cursor-pointer"
          :src="article.coverImage.url"
          @click="navigateTo(article.path)"
        />
        <div class="w-full">
          <NuxtLink :to="article.path" class="font-semibold">{{
            article.title
          }}</NuxtLink>
          <div class="text-sm text-slate-500">
            {{ formatDate(new Date(article.date), "Do of MMMM YYYY") }}
          </div>
        </div>

        <div>
          <UButton variant="soft" color="gray" :to="article.path"
            >Read article</UButton
          >
        </div>
      </div>
    </UCard>
  </UContainer>

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