<template>
  <div v-html="processedText" class="question-text"></div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  text: {
    type: String,
    required: true
  },
  medias: {
    type: Object,
    required: true
  }
});

const mediaRegex = /<media i(\d+)>/g;

function replaceMedia(text, medias) {
  return text.replace(mediaRegex, (match, id) => {
    const mediaKey = `m${id}`;
    if (medias[mediaKey]) {
      const [type, url, width, height] = medias[mediaKey];
      if (type === 'image') {
        return `<img src="${url}" width="${width}" height="${height}" alt="Question Image" />`;
      }
    }
    return '';
  });
}

const processedText = computed(() => replaceMedia(props.text, props.medias));
</script>

<style scoped>
.question-text {
  line-height: 1.6;
}

.question-text img {
  max-width: 100%;
  height: auto;
  margin: 10px 0;
}
</style>