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

<template>
  <div
    v-if="post && Object.keys(post.currentPost).length !== 0" v-motion
    :initial="{ opacity: 0 }" :enter="{opacity: 1, transition: {delay: 0.5,} }"
  >
    <div class="text-3xl my-2">
      <span class="font-bold text-fly-600 dark:text-fly-500">|</span>
      <span class="align-middle mx-2">{{ post.currentPost.title }}</span>
    </div>
    <div v-html="post.currentPost.body" />
  </div>
  <router-link v-if="post && Object.keys(post.currentPost).length !== 0" class="no-underline dark:hover:text-fly-500" :to="`/posts/`">
    Back to Posts
  </router-link>
</template>

<script setup lang="ts">
import { usePostStore } from '~/stores/post'

const post = usePostStore()

const props = defineProps<{ slug: string }>()
post.getCurrentPostBySlug(props.slug)

useHead({
  title: computed(() => `${post.currentPost.title} – Flycro`),
  meta: [
    { name: 'description', content: 'Posts about thoughts, projects and what inspires me.' },
  ],
})

</script>

<style scoped>

</style>
