<script setup lang="ts">
const runtimeConfig = useRuntimeConfig();
const cdnUrl = runtimeConfig.public.cdn_url;

defineProps<{
  media: {
    fileName: string | undefined;
    fileType: string | undefined;
    ogName: string | null | undefined;
  };
}>();
</script>

<template>
  <div
    class="select-none z-[-1] flex-1 flex items-stretch w-full justify-center *:object-contain"
  >
    <!-- Reserved for getting to know the question (20s) in basic questions section
    src="~/public/placeholder.svg" -->
    <img
      :src="cdnUrl + media.ogName"
      alt=""
      v-if="media.fileType == 'jpg'"
      :key="`${media.ogName}-photo`"
    />
    <video
      v-else-if="media.fileType == 'wmv'"
      :key="`${media.ogName}-video`"
      autoplay
    >
      <source
        :src="cdnUrl + [media.fileName, 'mp4'].join('.')"
        type="video/mp4"
      />
    </video>
    <span v-else class="text-4xl font-bold flex items-center justify-center"
      >Brak mediów</span
    >
  </div>
</template>