<script setup lang="ts">
import { getResponsiveResolvedSrc } from "#layers/utils/dataUtil";
import type { PageDataComponent } from "#layers/types/api/pageData";

const props = defineProps<{ componentData: PageDataComponent }>();

const displayText = computed(() => {
  return (
    props.componentData?.resources[0]?.["groups"]?.[0]?.display?.ko?.text || ""
  );
});
const assetPath = computed(() => {
  // [TODO] 이미지 그룹 여러개 처리
  // [TODO] 언어 처리
  return props.componentData?.resources[0]?.["groups"]?.[0]?.img_path?.ko;
});
const imageSrcs = computed(() => {
  if (!assetPath.value?.path_mo || !assetPath.value?.path_pc) {
    return { mobileSrc: "", pcSrc: "" };
  }
  return getResponsiveResolvedSrc(assetPath.value);
});
</script>

<template>
  <div>
    <img
      :src="imageSrcs.mobileSrc"
      :alt="displayText"
      class="w-full sm:hidden"
    />

    <!-- PC 이미지 (sm 이상) -->
    <img
      :src="imageSrcs.pcSrc"
      :alt="displayText"
      class="w-full hidden sm:block"
    />
  </div>
</template>
