<script setup lang="ts">
import type { PageDataResourceGroup } from '#layers/types/api/pageData'

interface Props {
  resourcesData?: PageDataResourceGroup
}

const props = defineProps<Props>()

// 텍스트 데이터 추출
// [TODO] txt 대신 text 사용
const displayText = computed(() => {
  return props.resourcesData?.display?.txt || ''
})
const imageSrc = computed(() => {
  return getResponsiveSrc(props.resourcesData?.res_path)
})
const colorName = computed(() => {
  return props.resourcesData?.display?.color_name
})
const colorCode = computed(() => {
  return props.resourcesData?.display?.color_code
})

// HTML 콘텐츠 정리 (줄바꿈 처리)
const sanitizedContent = computed(() => {
  return displayText.value?.replace(/\n/g, '<br/>') || ''
})

// 이미지가 있는지 확인
const hasImage = computed(() => {
  return imageSrc.value && (imageSrc.value.mobileSrc || imageSrc.value.pcSrc)
})
</script>

<template>
  <!-- 이미지가 있는 경우 -->
  <template v-if="hasImage">
    <!-- 모바일 이미지 (md 미만) -->
    <img
      v-if="imageSrc.mobileSrc"
      :src="imageSrc.mobileSrc"
      :alt="displayText"
      class="md:hidden w-full h-full object-contain"
    />
    <!-- PC 이미지 (md 이상) -->
    <img
      v-if="imageSrc.pcSrc"
      :src="imageSrc.pcSrc"
      :alt="displayText"
      class="hidden md:block w-full h-full object-contain"
    />
  </template>

  <!-- 텍스트가 있는 경우 -->
  <span
    v-else-if="displayText"
    v-dompurify-html="sanitizedContent"
    :style="{ color: getColorCode({ colorName, colorCode }) }"
    class="block"
  />
</template>
