<route>
{
  meta:{
    layout: 'posts'
  }
}
</route>

<template>
  <div>
    <h1>Blog</h1>
    <div>
      <ul v-if="post.postList && post.loading === false" key="test" class="list-none">
        <Motion
          :initial="{ opacity: 0 }"
          :animate="{ opacity: 1}"
          :transition="{ duration: 0.5, easing: 'ease-in-out' }"
        >
          <router-link v-for="p in post.postList" :key="p.slug" class="no-underline dark:hover:text-fly-500" :to="`/posts/${p.slug}`">
            <li>
              <div class="text-xl">
                {{ p.title }}
              </div>
              <div class="flex justify-start flex-row">
                <div class="text-xs">
                  {{ convertDate(p.date_created) }}
                </div>
              </div>
            </li>
          </router-link>
        </Motion>
      </ul>

      <Motion
        :initial="{ opacity: 0 }"
        :animate="{ opacity: 1}"
        :transition="{ duration: 0.5, easing: 'ease-in-out' }"
      >
        <div v-if="post.loading === false && post.postList.length === 0" class="text-xl">
          No Posts found
        </div>
      </Motion>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Motion } from 'motion/vue'
import type { Ref } from 'vue'
import dayjs from 'dayjs'
import { usePostStore } from '~/stores/post'

useHead({
  title: 'Blog – Flycro',
  meta: [
    { name: 'description', content: 'Posts about thoughts, projects and what inspires me.' },
  ],
})

const post = usePostStore()
const show = ref(false)

function convertDate(date: string): string {
  return dayjs(date).format('DD. MMMM YYYY')
}

onMounted(() => {
  post.fetchPosts()
})

</script>

<style scoped>
article.prose.m-auto div div ul.list-none a.no-underline
{
    @apply no-underline
}
</style>
