<template>
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div v-if="post" class="prose prose-lg max-w-none">
      <div class="mb-8">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">{{ post.title }}</h1>
        <div class="flex items-center justify-between text-gray-600 mb-6">
          <time>{{ formatDate(post.date) }}</time>
          <LanguageSwitcher />
        </div>
      </div>
      
      <ContentRenderer v-if="post" :value="post" />
    </div>
    
    <div v-else class="text-center py-20">
      <h1 class="text-2xl font-bold text-gray-900 mb-4">{{ t('errors.404.translation') }}</h1>
      <p class="text-gray-600 mb-6">{{ t('errors.404.translationMessage') }}</p>
      <NuxtLink 
        :to="localePath('/blog')"
        class="inline-block bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
      >
        {{ t('blog.backToBlog') }}
      </NuxtLink>
    </div>
  </div>
</template>

<script setup>
const { t, locale } = useI18n()
const route = useRoute()
const localePath = useLocalePath()
// console.log(locale.value)
// const { data: post } = await useAsyncData(
//   () => `blog-item-${locale.value}-${route.params.slug}`,
//   async () => {
//    return await queryCollection('blog').where('path', '=', route.path ).first()
//   },{ watch: [locale], }
// )
console.log(route.path)
const { data: post } = await useAsyncData(
  `blog-item-${locale.value}-${route.params.slug}`,
  async () => {
    const localizedPath = localePath(`/blog/${route.params.slug}`)
    return await queryCollection('blog').where('path', '=', localizedPath).first()
  },
  { watch: [locale] }
)

const formatDate = (date) => {
  return new Date(date).toLocaleDateString(locale.value, {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

if (post) {
  useSeoMeta({
    title: post.title,
    description: post.description,
    ogTitle: post.title,
    ogDescription: post.description
  })
}
</script>


