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

<template>
  <div v-if="post && Object.keys(post.currentPost).length !== 0">
    <Motion
      :initial="{ opacity: 0 }"
      :animate="{ opacity: 1}"
      :transition="{ duration: 0.5, easing: 'ease-in-out' }"
    >
      <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" />
    </Motion>
  </div>
  <router-link class="no-underline dark:hover:text-fly-500" :to="`/posts/`">
    Back to Posts
  </router-link>
</template>

<script setup lang="ts">
import { Motion } from 'motion/vue'
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>
