<template>
  <div v-if="showComponent" class="flex flex-col gap-2 w-full min-h-fit max-w-4xl mx-auto">
    <iframe v-if="data?.file.mime == 'application/pdf'" :src="baseUrl + data.file.url" class="w-full h-[90vh]"></iframe>
    <NuxtPicture
      v-else-if="data?.file.mime.includes('image')"
      loading="lazy"
      class="w-full object-cover object-center mx-auto"
      :src="baseUrl + data?.file.url"
      :imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
    />
    <video
      v-else-if="data?.file.mime.includes('video')"
      class="w-full max-w-full h-auto object-contain"
      controls
      controlsList="nodownload"
    >
      <source :src="baseUrl + data?.file.url" type="video/mp4" />
    </video>
  </div>
</template>

<script setup lang="ts">
import type { PropType } from "vue";
import type DynamicZoneFileViewer from "~~/types/component/dynamic-zone/fileViewer";

const runtimeConfig = useRuntimeConfig();
const baseUrl = runtimeConfig.public.strapi.url;

const props = defineProps({
  data: Object as PropType<DynamicZoneFileViewer>,
});

const showComponent = computed(() => {
  if (
    props.data?.file.mime == "application/pdf" ||
    props.data?.file.mime.includes("image") ||
    props.data?.file.mime.includes("video")
  ) {
    return true;
  }
});
</script>
