<script setup lang="ts">
interface ImageSource {
  mobileSrc?: string
  pcSrc?: string
}

interface Props {
  text?: string
  imageSrc?: ImageSource
}

const props = defineProps<Props>()

const sanitizedContent = computed(() => {
  return props.text?.replace(/\n/g, '<br/>') || ''
})
</script>

<template>
  <template v-if="imageSrc && 'mobileSrc' in imageSrc">
    <!-- 모바일 이미지 (sm 미만) -->
    <img
      v-if="imageSrc.mobileSrc"
      :src="imageSrc.mobileSrc"
      :alt="text"
      class="sm:hidden w-full h-full object-contain"
    />
    <!-- PC 이미지 (sm 이상) -->
    <img
      v-if="imageSrc.pcSrc"
      :src="imageSrc.pcSrc"
      :alt="text"
      class="hidden sm:block w-full h-full object-contain"
    />
  </template>
  <span v-else-if="text" v-dompurify-html="sanitizedContent" />
</template>
