<template>
  <div v-if="documents.length" class="space-y-1 mt-2">
    <div
      v-for="doc in documents"
      :key="doc.id"
      class="flex items-center justify-between rounded border border-base-200 bg-base-100 px-2 py-1.5 text-xs"
    >
      <div class="flex items-center gap-2 min-w-0">
        <component
          :is="documentIcon(doc).component"
          class="w-4 h-4 flex-shrink-0"
          :class="documentIcon(doc).colorClass"
        />
        <span class="truncate">{{ doc.name || doc.filename }}</span>
        <span class="text-base-content/40 flex-shrink-0">{{ formatSize(doc.size) }}</span>
      </div>
      <div class="flex items-center gap-1 flex-shrink-0 ml-2">
        <button
          type="button"
          class="btn btn-ghost btn-xs"
          :disabled="!canPreviewDocument(doc)"
          :title="canPreviewDocument(doc) ? 'Consulter' : 'Aperçu non disponible'"
          @click="openPreview(doc)"
        >
          Consulter
        </button>
        <button
          type="button"
          class="btn btn-ghost btn-xs"
          @click="downloadDocument(doc)"
        >
          Télécharger
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { CommentDocument } from '~/composables/useComments'
import { canPreviewDocument } from '~/utils/documentPreview'
import { formatSize, documentIcon, downloadDocument } from '~/shared/utils/documentDisplayUtils'

defineProps<{
  documents: CommentDocument[]
}>()

const openPreview = (doc: CommentDocument) => {
  if (!canPreviewDocument(doc)) return
  // Open file URL in new tab for preview
  if (doc.fileUrl) {
    window.open(doc.fileUrl, '_blank')
  }
}
</script>
