<template>
  <div class="max-w-4xl mx-auto px-4 py-12">
    <!-- Навигация: теперь используем router-link вместо обычных кнопок -->
    <nav class="flex space-x-6 mb-8 pb-2">
      <router-link 
        to="/docs/policy"
        class="px-1 py-2 text-sm font-medium transition-colors border-b-2 -mb-2.5"
        active-class="border-blue-600 text-blue-600 dark:text-blue-400 dark:border-blue-400"
        inactive-class="border-transparent text-slate-500 hover:text-slate-700 dark:text-slate-400"
      >
        Политика конфиденциальности
      </router-link>
      
      <router-link 
        to="/docs/agreement"
        class="px-1 py-2 text-sm font-medium transition-colors border-b-2 -mb-2.5"
        active-class="border-blue-600 text-blue-600 dark:text-blue-400 dark:border-blue-400"
        inactive-class="border-transparent text-slate-500 hover:text-slate-700 dark:text-slate-400"
      >
        Пользовательское соглашение
      </router-link>
    </nav>

    <!-- Область отображения Markdown (Tailwind Typography) -->
    <div 
      v-if="htmlContent" 
      v-html="htmlContent" 
      class="prose prose-slate max-w-none dark:prose-invert"
    ></div>
    
    <div v-else-if="isLoading" class="text-center py-12 text-slate-500 dark:text-slate-400">
      Загрузка документа...
    </div>

    <div v-else class="text-center py-12 text-red-500">
      Документ не найден или произошла ошибка.
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { marked } from 'marked'

// Принимаем параметр docName из роутера
const props = defineProps({
  docName: {
    type: String,
    required: true
  }
})

const htmlContent = ref('')
const isLoading = ref(true)

// Функция загрузки md-файла
const fetchMarkdown = async (name) => {
  isLoading.value = true
  htmlContent.value = ''
  
  try {
    // Загрузка из папки public/docs/
    const response = await fetch(`/docs/${name}.md`)
    if (!response.ok) throw new Error('Файл отсутствует')
    
    const markdownText = await response.text()
    htmlContent.value = marked(markdownText)
  } catch (error) {
    console.error('Ошибка отрисовки md:', error)
    htmlContent.value = ''
  } finally {
    isLoading.value = false
  }
}

// Загружаем файл при первой инициализации страницы
onMounted(() => {
  fetchMarkdown(props.docName)
})

// Отслеживаем изменение ссылки (например, если пользователь перешел с policy на agreement)
watch(() => props.docName, (newName) => {
  fetchMarkdown(newName)
})
</script>
