<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useBlog, type BlogPost } from '../composables/useBlog';
  import { marked } from 'marked';

  const route = useRoute();
  const router = useRouter();
  const { getPost } = useBlog();
  const post = ref<BlogPost | undefined>(undefined);
  const renderedContent = ref('');

  onMounted(async () => {
    const slug = route.params.slug as string;
    post.value = await getPost(slug);

    if (post.value) {
      renderedContent.value = await marked(post.value.content);
    } else {
      router.push({ name: 'blog-overview' });
    }
  });
</script>

<template>
  <div class="w-full">
    <div v-if="post">
      <RouterLink :to="{ name: 'blog-overview' }" class="inline-flex items-center text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white mb-6 transition-colors" title="Return to blog overview" aria-label="Navigate back to blog overview page">
        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
        </svg>
        Back to overview
      </RouterLink>

      <h1 class="text-4xl font-bold mb-4 text-gray-900 dark:text-white">{{ post.title }}</h1>
      <p class="text-gray-600 dark:text-gray-400 text-sm mb-8">{{ post.date }}</p>
      <!-- Image is intentionally omitted here as per requirements -->
      <div class="prose max-w-none" v-html="renderedContent"></div>
    </div>
    <div v-else class="text-center py-12">
      <p class="text-xl text-gray-600 dark:text-gray-400">Loading...</p>
    </div>
  </div>
</template>
