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

interface Props {
  category?: 'system' | 'image'
  resourcesData: PageDataResourceGroup
}

const props = defineProps<Props>()

const modalStore = useModalStore()

const backgroundColor = computed(() => {
  return getColorCodeFromData(props.resourcesData.display, 'none')
})

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

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