<template>
    <Teleport to="body">
        <Transition name="md-preview" appear>
            <div v-if="modelValue" class="fixed inset-0 z-[60] flex items-center justify-center p-4">
                <!-- Backdrop -->
                <div
                    class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm"
                    @click="emit('update:modelValue', false)"
                />

                <!-- Modal -->
                <div
                    class="relative z-10 flex w-full max-w-2xl flex-col overflow-hidden rounded-2xl bg-white shadow-2xl ring-1 ring-black/5"
                    style="max-height: min(80vh, 700px)"
                >
                    <!-- Header -->
                    <div class="flex items-center justify-between border-b border-slate-100 px-6 py-4">
                        <h3 class="text-lg font-semibold text-slate-800">
                            {{ title }}
                        </h3>
                        <button
                            class="rounded-lg p-1.5 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600"
                            @click="emit('update:modelValue', false)"
                        >
                            <Icon name="heroicons:x-mark" class="size-5" />
                        </button>
                    </div>

                    <!-- Body -->
                    <div class="overflow-y-auto px-6 py-4">
                        <div
                            v-if="content"
                            class="prose prose-slate max-w-none prose-headings:font-semibold prose-a:text-blue-600 prose-code:rounded prose-code:bg-slate-100 prose-code:px-1.5 prose-code:py-0.5 prose-code:text-sm prose-code:before:content-none prose-code:after:content-none prose-pre:bg-slate-900 prose-pre:text-slate-100 prose-pre:overflow-x-auto [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:text-inherit [&_pre_code]:text-[0.875rem] [&_pre_code]:leading-relaxed"
                            v-html="renderedHtml"
                        />
                        <p v-else class="text-sm italic text-slate-400">
                            Aucune description
                        </p>
                    </div>
                </div>
            </div>
        </Transition>
    </Teleport>
</template>

<script setup lang="ts">
import { marked } from 'marked'

const props = defineProps<{
    modelValue: boolean
    content: string
    title?: string
}>()

const emit = defineEmits<{
    (e: 'update:modelValue', value: boolean): void
}>()

const renderedHtml = computed(() => {
    if (!props.content) return ''
    return marked.parse(props.content, { async: false }) as string
})
</script>

<style scoped>
.md-preview-enter-active,
.md-preview-leave-active {
    transition: opacity 0.2s ease;
}

.md-preview-enter-from,
.md-preview-leave-to {
    opacity: 0;
}
</style>
