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

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

const resourcesData = computed(() => {
  return getResourcesData({
    resources: props.componentData?.resources,
  })
})
const bgStyles = getResponsiveSrc(resourcesData.value?.res_path, {
  resourcesType: 'bg',
})
</script>

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