<template>
  <component :is="tag" class="aspect-auto">
    <div v-if="doc" class="flex items-center gap-2 mt-1">
      <div
        class="flex flex-col items-center justify-center bg-gray-50 dark:bg-gray-700 p-2 w-[75px] h-[90px] shadow-md drop-shadow-sm rounded-lg"
      >
        <document-icon
          class="w-20 h-20 text-brand-blue-500 dark:text-brand-scooter-300"
        />
        <span class="text-brand-blue-600 dark:text-brand-scooter-400">{{
          file.ext
        }}</span>
      </div>
      <span
        class="text-xs text-brand-blue-800 font-semibold dark:text-brand-scooter-500"
        >{{ file.name }}</span
      >
    </div>
    <div v-if="video" class="flex items-center gap-2 mt-1">
      <video autoplay="false" preload="metadata" class="w-[100px] h-[90px]">
        <source :src="file.url" />
      </video>
      <span
        class="text-xs text-brand-blue-800 font-semibold dark:text-brand-scooter-500"
        >{{ file.name + '.' + file.ext }}</span
      >
    </div>
    <img
      v-if="!video && !doc"
      :src="file.url"
      :alt="file.file.name"
      :title="file.file.name"
    />
  </component>
</template>

<script setup>
import DocumentIcon from '../components/icons/DocumentIcon.vue'
defineProps({
  file: { type: Object, required: true },
  tag: { type: String, default: 'li' },
  video: { type: Boolean, default: false },
  doc: { type: Boolean, default: false },
})
</script>
