<script setup lang="ts">
import type { PageDataResourceGroup } from '#layers/types/api/pageData'

const props = defineProps<{ resourcesData: PageDataResourceGroup }>()

const emit = defineEmits<{
  (e: 'click'): void
}>()

const bgStyles = getResponsiveSrc(props.resourcesData?.res_path, {
  resourcesType: 'bg',
})
</script>

<template>
  <button
    v-if="resourcesData && bgStyles"
    class="relative group bg-cover bg-center bg-no-repeat w-[66px] h-[66px] md:w-[100px] md:h-[100px]"
    :class="getResponsiveClass()"
    :style="bgStyles"
    @click="emit('click')"
  >
    <span
      class="absolute inset-0 m-[10px] bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300 ease-in-out rounded-[50%]"
    />
    <span class="sr-only">Play</span>
  </button>
</template>
