<script setup lang="ts">
import { formatDate } from 'date-fns'
</script>

<template>
  <section>
    <h3 class="alex">Recent posts</h3>
    <ContentList
      :query="{
        path: '/blog',
        where: [{ draft: false }],
        limit: 3,
        sort: [{ created: -1 }],
      }"
    >
      <template #default="{ list }">
        <div class="d-grid gap-3">
          <NuxtLink
            v-for="post in list"
            :key="post._path"
            :to="post._path"
            class="no-decoration"
          >
            <article
              class="post-box d-flex flex-column flex-md-row gap-3 rounded-4 h-100"
            >
              <div class="post-thumb">
                <img
                  draggable="false"
                  :src="post.thumbnail"
                  :alt="post.title"
                  class="rounded-4"
                />
              </div>
              <div>
                <h3 class="post-title alex">{{ post.title }}</h3>
                <p class="post-description">{{ post.description }}</p>

                <div class="row">
                  <div class="col-6 d-flex flex-row gap-1 align-items-center">
                    <iconify-icon icon="mdi:calendar" />
                    <small class="nobr">
                      {{ formatDate(post.created, 'LLLL do, y &ndash; HH:mm') }}
                    </small>
                  </div>
                </div>
                <div v-if="post.updated" class="row">
                  <div class="col-12 d-flex flex-row gap-1 align-items-center">
                    <iconify-icon icon="mdi:pencil" />
                    <small class="nobr">
                      {{ formatDate(post.updated, 'LLLL do, y &ndash; HH:mm') }}
                    </small>
                  </div>
                </div>
              </div>

              <div class="post-pocket d-flex flex-row gap-1 align-items-center">
                <iconify-icon icon="mdi:clock-outline" />
                <small class="nobr font-monospace font-small">
                  {{ post.readingTime.text }}
                </small>
              </div>
            </article>
          </NuxtLink>
        </div>
      </template>

      <template #not-found>
        <div
          class="d-flex flex-column justify-content-center align-items-center gap-3"
        >
          <span>No posts found 🙁</span>
          <NuxtLink to="/" class="link-hi">Back to index</NuxtLink>
        </div>
      </template>
    </ContentList>
  </section>
</template>

<style scoped lang="scss"></style>
