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

const props = defineProps<{
  media: string | null | undefined;
}>();

const mediaSplit = computed(() => {
  const dotSplit = props.media?.split('.');
  const extension = dotSplit?.pop()?.toLowerCase();
  return [dotSplit?.join('.'), extension];
});
</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
      v-if="mediaSplit[1] === 'jpg'"
      :key="`${media}-photo`"
      :src="cdnUrl + media"
      alt=""
    />
    <video v-else-if="mediaSplit[1] === 'wmv'" :key="`${media}-video`" autoplay>
      <source :src="cdnUrl + mediaSplit[0] + '.mp4'" type="video/mp4" />
    </video>
    <span v-else class="text-4xl font-bold flex items-center justify-center"
      >Brak mediów</span
    >
  </div>
</template>
