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

interface Props {
  resourcesData?: PageDataResourceGroup
  objectFit?: 'contain' | 'cover'
  alt?: string
}

const props = withDefaults(defineProps<Props>(), {
  objectFit: 'contain',
})

const breakpoints = useResponsiveBreakpointsReliable()

const displayText = computed(() => {
  return props.resourcesData?.display?.text || 'image'
})
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
})
const currentImageSrc = computed(() => {
  if (!imageSrc.value) return ''
  return breakpoints.value.isMobile
    ? imageSrc.value.mobileSrc || ''
    : imageSrc.value.pcSrc || ''
})

// 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>
  <!-- 이미지 -->
  <img
    v-if="hasImage && currentImageSrc"
    :src="currentImageSrc"
    :alt="alt || displayText"
    :class="`w-full h-full object-${objectFit}`"
    loading="lazy"
  />

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