<script setup lang="ts">
import { useAuthStore } from '@/stores/auth'
import type { DocFile } from '@/api/types'

defineProps<{
  doc: DocFile
  owner: string
  repo: string
}>()

const auth = useAuthStore()
</script>

<template>
  <router-link
    :to="`/app/${auth.org}/docs/${owner}/${repo}/${doc.path}`"
    class="block p-3 border border-border-light/60 dark:border-slate-800 rounded-lg hover:border-accent-500 dark:hover:border-accent-600 transition-colors"
  >
    <div class="flex items-center gap-2">
      <span class="text-sm font-medium text-slate-700 dark:text-slate-300">{{ doc.title || doc.name }}</span>
      <span v-if="doc.doc_type !== 'doc'" class="text-xs px-1.5 py-0.5 rounded bg-surface-light-elevated dark:bg-slate-700 text-slate-500">{{ doc.doc_type }}</span>
      <span v-if="doc.is_indexed" class="text-xs px-1.5 py-0.5 rounded bg-blue-50 text-brand-600 dark:bg-blue-900/50 dark:text-blue-400">indexed</span>
    </div>
    <div class="text-xs text-slate-400 mt-1">{{ doc.path }}</div>
  </router-link>
</template>
