<script setup lang="ts">
import type { DocDetail as DocDetailType } from '@/api/types'
import SpecContent from '@/components/spec/SpecContent.vue'

defineProps<{ doc: DocDetailType }>()
</script>

<template>
  <div>
    <div class="mb-8 p-6 border border-border-light dark:border-slate-700 rounded-lg bg-surface-light-alt dark:bg-surface-alt">
      <div class="flex items-start justify-between">
        <div>
          <h1 class="text-2xl font-bold font-display text-slate-800 dark:text-slate-100 mb-2">{{ doc.title }}</h1>
          <span v-if="doc.doc_type !== 'doc'" class="text-xs px-2 py-0.5 rounded bg-surface-light-elevated dark:bg-slate-700 text-slate-500">{{ doc.doc_type }}</span>
        </div>
        <a
          :href="doc.github_url"
          target="_blank"
          rel="noopener"
          class="inline-flex items-center gap-1 px-3 py-1.5 text-sm rounded-md border border-border-light dark:border-slate-600 text-slate-600 dark:text-slate-400 hover:bg-surface-light-elevated dark:hover:bg-surface-elevated transition-colors"
        >View on GitHub</a>
      </div>
    </div>
    <SpecContent :html="doc.rendered_html" />
  </div>
</template>
