<template>
  <div>
    <AppMenu />
    <div class="flex items-center border-b mb-3 border-primary">
      <h1 class="text-center w-full py-2">{{ Title }}</h1>
      <Skeleton width="85%" v-if="isLoading"></Skeleton>
    </div>
    <div class="p-3">
      <div v-if="isLoading">
        <Skeleton></Skeleton>
        <Skeleton width="85%" class="my-2"></Skeleton>
        <Skeleton width="75%"></Skeleton>
      </div>
      <div v-html="Content"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const Title = ref()
  const Content = ref()
  const route = useRoute()
  const isLoading = ref(true)
  const { apiFetch } = useApi()

  onMounted(async()=>{
    const {data} = await apiFetch('/getPage', { query:{id:route.params.id}})
    if(data.value?.success){
      Title.value = data.value?.page.post_title
      Content.value = data.value?.page.post_content
    }
    isLoading.value = false
  })
</script>

<style>

</style>