<script setup lang="ts">
import { getResolvedHost } from '#layers/utils/styleUtil'
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 imagePaths = computed(() => {
  if (!props.resourcesData?.res_path) return null

  const pcPath =
    props.resourcesData.res_path.path_pc ?? props.resourcesData.res_path.path_mo
  const moPath =
    props.resourcesData.res_path.path_mo ?? props.resourcesData.res_path.path_pc

  return {
    pc: pcPath ? getResolvedHost(pcPath) : '',
    mo: moPath ? getResolvedHost(moPath) : '',
  }
})
</script>

<template>
  <picture v-if="imagePaths">
    <source media="(min-width: 1024px)" :srcset="imagePaths.pc" />
    <source media="(max-width: 1023px)" :srcset="imagePaths.mo" />
    <img
      :src="imagePaths.pc"
      :alt="alt"
      :class="`w-full h-full object-${objectFit}`"
      loading="lazy"
    />
  </picture>
</template>

<style scoped>
/* 이미지 깨짐 시 보더 및 아이콘 제거 */
img {
  border: none;
  outline: none;
}

/* 깨진 이미지 아이콘과 alt 텍스트 숨김 */
img::before,
img::after {
  display: none;
}

/* alt 텍스트 영역 숨김 */
img[alt] {
  text-indent: -9999px;
  overflow: hidden;
  display: block;
}
</style>
