<script setup lang="ts">
import { EditorBlock } from "@enesis/editor"
import { ref } from "vue"
import type { MarkerVisibilityMode } from "@/composables/useMarkdownDecorations"

const props = withDefaults(
  defineProps<{
    content: string
    template?: string
    title?: string
    description?: string
    markerMode?: MarkerVisibilityMode
  }>(),
  {
    markerMode: "always-visible" as MarkerVisibilityMode,
  },
)

const content = ref(props.content)
</script>

<template>
  <div class="space-y-3">
    <div v-if="title" class="mb-1">
      <h3 class="text-sm font-semibold text-highlighted">{{ title }}</h3>
      <p v-if="description" class="text-sm text-muted mt-0.5">{{ description }}</p>
    </div>

    <div class="rounded-lg border border-default dark:bg-neutral-950/50 overflow-hidden">
      <div class="p-4">
        <EditorBlock
          v-model:content="content"
          :focused="true"
          cursor-position="end"
          :marker-mode="markerMode"
        />
      </div>

      <details
        class="group border-t border-default cursor-pointer select-none"
      >
        <summary
          class="px-4 py-2 text-xs font-medium text-muted hover:text-highlighted transition-colors flex items-center gap-1.5"
        >
          <span class="i-lucide-code shrink-0 size-3.5" />
          Source
        </summary>
        <pre
          class="px-4 py-3 overflow-x-auto text-xs leading-relaxed font-mono dark:bg-neutral-950/50 border-t border-default text-muted"
        ><code>{{ template ?? content }}</code></pre>
      </details>
    </div>
  </div>
</template>
