<script setup lang="ts">
import DOMPurify from 'dompurify'
import { computed } from 'vue'

const props = defineProps<{ html: string }>()
const sanitizedHtml = computed(() => DOMPurify.sanitize(props.html))
</script>

<template>
  <div class="border border-border-light dark:border-slate-700 rounded-lg p-6 bg-surface-light dark:bg-surface-alt">
    <div v-if="!html" class="text-sm text-slate-400 text-center py-8">
      Click "Preview" to render the spec.
    </div>
    <!-- eslint-disable-next-line vue/no-v-html -->
    <div v-else class="spec-prose" v-html="sanitizedHtml"></div>
  </div>
</template>
