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

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

const assetPath = computed(() => {
  // [TODO] 이미지 그룹 여러개 처리
  // [TODO] comm 처리
  return props.componentData?.resources[0]["groups"][0]?.img_path?.comm;
});

console.log("assetPath:", props.componentData);
</script>

<template>
  <button
    class="bg-cover bg-center bg-no-repeat w-[66px] h-[66px] lg:w-[100px] lg:h-[100px]"
    :class="getResponsiveClass()"
    :style="getResponsiveResolvedSrc(assetPath, 'bg')"
  >
    <span class="sr-only">videoPlay</span>
  </button>
</template>
