<script setup lang="ts">
import { Head, Link } from '@inertiajs/vue3'
import AppLayout from '@/layouts/AppLayout.vue'
import { Toaster } from '@/components/ui/sonner'
import { Button } from '@/components/ui/button'
import type { BreadcrumbItem } from '@/types'

const props = defineProps<{ document: any }>()

const breadcrumbs: BreadcrumbItem[] = [
    { title: 'Панель управления', href: '/dashboard' },
    { title: 'Документация', href: '/documentation' },
    { title: props.document.title, href: '' },
]
</script>

<template>
    <Head :title="document.title" />

    <AppLayout :breadcrumbs="breadcrumbs">
        <Toaster />

        <div class="p-6 max-w-3xl flex flex-col gap-4">

            <!-- Header -->
            <div class="mb-4 flex flex-col gap-1">
                <h1 class="text-2xl sm:text-3xl font-bold">
                    {{ document.title }}
                </h1>
                <p class="text-sm text-muted-foreground">
                    {{ document.category?.name || 'Без категории' }}
                </p>
            </div>

            <div class="flex gap-2">
                <Link v-if="$page.props.auth.user.role === 'admin'" :href="`/documentation/${document.id}/edit`">
                    <Button variant="outline">Редактировать</Button>
                </Link>
            </div>

            <div class="prose max-w-none whitespace-pre-line">
                {{ document.content }}
            </div>

        </div>
    </AppLayout>
</template>
