<script setup>
import BaseCard from '@/components/UI/BaseCard.vue'
import { onMounted, ref } from 'vue'
import apiClient from '@/services/api-client.js'
import { useRoute } from 'vue-router'

const post = ref()

onMounted(() => {
  apiClient.get(`/posts/${useRoute().params.id}`)
    .then(res => post.value = res.data.data)
})
</script>

<template>
  <ContentWrapper class='justify-center items-center h-1/3' background>
    <BaseCard v-if="post" class="max-w-3/4 w-1/2 m-20 p-10">
        <div>
          <h1 class="font-bold text-2xl py-1">{{post.title}}</h1>
          <hr class="mb-2">
          <p v-if="post.user" class="mt-2"><strong>Author:</strong> {{post.user.name}} {{post.user.surname}}</p>
          <p class="mt-5"><strong>Read the story:</strong></p>
          <p>{{post.content}}</p>
        </div>
    </BaseCard>
  </ContentWrapper>
</template>

<style scoped>

</style>