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

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

// YouTube 모달 스토어 사용
const modalStore = useModalStore()

const {locale} = useI18n()
const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()


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

  sendLog(locale.value, useAnalyticsLogDataDirect(props.resourcesData, props.pageVerTmplSeq))
}
</script>

<template>
  <AtomsButtonPlay
    :resources-data="resourcesData"
    @click="handleVideoPlayClick"
  />
</template>
