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

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

const resources = computed(() => {
  return props.componentData?.resources;
});

const imgPathArray = getAssetPathArray({
  resources: resources.value,
  test: "test",
});
const imageSrc = getResponsiveSrc({
  pathArray: imgPathArray,
  type: "bg",
});
</script>

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