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

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

const modalStore = useModalStore()

// 비디오 플레이 버튼 클릭 핸들러
const handleVideoPlayClick = () => {
  const youtubeUrl = props.resourcesData?.display?.text ?? ''
  if (youtubeUrl) {
    modalStore.handleOpenYoutube({ youtubeUrl })
  }
}
</script>

<template>
  <AtomsButtonPlay
    v-motion-stagger
    :tracking="props.resourcesData.tracking"
    @click="handleVideoPlayClick"
  />
</template>
