<script setup lang="ts">
const { data: article } = await useAsyncData("latest-article", async () => {
  return queryCollection("articles").order("date", "DESC").first();
});

const date = useDateFormat(new Date(article.value?.date ?? ""), "Do of MMMM YYYY");

const excerpt = computed(() => {
  if (!article.value) return "";
  const text = article.value.description ?? article.value.body ?? "";
  return text.slice(0, 150) + (text.length > 150 ? "..." : "");
});
</script>

<template>
  <UContainer
    v-if="article"
    class="p-4 sm:p-6 lg:p-8 max-w-3xl"
    as="section"
  >
    <span class="text-sm text-gray-500 flex flex-row gap-1 items-center">
      Latest article
    </span>

    <ULink
      :to="article.path"
      class="block mt-4 p-4 rounded-lg border border-gray-200 dark:border-slate-600 hover:border-gray-300 dark:hover:border-slate-500 transition-colors"
    >
      <div class="flex gap-6 items-start flex-row-reverse">
        <NuxtImg
          v-if="article.coverImage?.url"
          class="w-24 h-24 object-cover rounded-lg shrink-0"
          :src="article.coverImage.url.replace('w=1287&h=600', 'w=300&h=300')"
          :alt="article.title"
        />
        <div class="flex flex-col gap-2">
          <h3 class="font-semibold text-lg">{{ article.title }}</h3>
          <p class="text-sm text-slate-600 dark:text-slate-400 line-clamp-3">{{ excerpt }}</p>
          <time class="text-xs text-slate-500">{{ date }}</time>
        </div>
      </div>
    </ULink>
  </UContainer>
</template>
