<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"
  >
    <!-- OLD -->
    <!-- + [media.fileName, media.fileType].join('.') -->
    <img :src="cdnUrl + media.ogName" alt="" v-if="media.fileType == 'jpg'" />
    <video v-else-if="media.fileType == 'wmv'" :key="media.fileName" 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>
