<template>
  <div class="markdown-preview" v-html="html"></div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import MarkdownIt from 'markdown-it'

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

const md = new MarkdownIt({
  html: false,
  linkify: true,
  breaks: true
})

const html = computed(() => md.render(props.content || ''))
</script>

<style scoped>
.markdown-preview {
  color: rgba(226, 232, 240, 0.92);
  font-size: 14px;
  line-height: 1.75;
  word-break: break-word;
}

.markdown-preview :deep(h1),
.markdown-preview :deep(h2),
.markdown-preview :deep(h3),
.markdown-preview :deep(h4) {
  margin: 14px 0 8px;
  color: var(--ls-text);
  font-weight: 700;
  line-height: 1.35;
}

.markdown-preview :deep(h1) {
  font-size: 22px;
}

.markdown-preview :deep(h2) {
  font-size: 19px;
}

.markdown-preview :deep(h3) {
  font-size: 16px;
}

.markdown-preview :deep(p) {
  margin: 0 0 10px;
}

.markdown-preview :deep(ul),
.markdown-preview :deep(ol) {
  margin: 8px 0 12px;
  padding-left: 22px;
}

.markdown-preview :deep(li) {
  margin: 4px 0;
}

.markdown-preview :deep(blockquote) {
  margin: 12px 0;
  padding: 8px 12px;
  color: rgba(226, 232, 240, 0.78);
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid rgba(255, 171, 145, 0.55);
  border-radius: 6px;
}

.markdown-preview :deep(code) {
  padding: 2px 5px;
  color: #ffd6c8;
  background: rgba(255, 171, 145, 0.12);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
}

.markdown-preview :deep(pre) {
  overflow: auto;
  margin: 12px 0;
  padding: 12px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.markdown-preview :deep(pre code) {
  padding: 0;
  color: rgba(226, 232, 240, 0.92);
  background: transparent;
}

.markdown-preview :deep(table) {
  width: 100%;
  margin: 12px 0;
  border-collapse: collapse;
}

.markdown-preview :deep(th),
.markdown-preview :deep(td) {
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.markdown-preview :deep(th) {
  color: var(--ls-text);
  background: rgba(255, 255, 255, 0.05);
}

.markdown-preview :deep(a) {
  color: #81d4fa;
}
</style>
