<script setup lang="ts">
import YouTubeModal from '#layers/components/blocks/modal/YouTube.vue'

interface Props {
  components: Record<string, any>
}

const props = defineProps<Props>()

// YouTube 모달 상태 관리
const isYouTubeModalOpen = ref(false)
const youtubeVideoId = ref('')

// 비디오 플레이 버튼 클릭 핸들러
const handleVideoPlayClick = () => {
  // TODO: 실제 YouTube 비디오 ID를 설정해야 합니다
  // 예시: 'dQw4w9WgXcQ' (Rick Astley - Never Gonna Give You Up)
  youtubeVideoId.value = 'UKVsZYHxYTc' // 임시로 설정
  isYouTubeModalOpen.value = true
}

// 모달 닫기 핸들러
const handleCloseModal = () => {
  isYouTubeModalOpen.value = false
  youtubeVideoId.value = ''
}
</script>

<template>
  <section class="relative h-[640px] lg:h-[1000px]">
    <WidgetsBackground
      v-if="props.components?.background"
      :component-data="props.components?.background"
      gradient-class="bg-gradient-to-b from-[#100d0f]/0 to-[#100d0f]"
    />
    <div
      class="relative h-full flex flex-col items-center justify-center gap-4"
    >
      <WidgetsMainTitle
        v-if="props.components.mainTitle"
        :component-data="props.components.mainTitle"
        class="w-[355px] lg:w-[944px]"
      />
      <WidgetsDescription
        v-if="props.components.description"
        :component-data="props.components.description"
      />
      <WidgetsVideoPlay
        v-if="props.components.videoPlay"
        :component-data="props.components.videoPlay"
        @click="handleVideoPlayClick"
      />
    </div>
  </section>

  <!-- YouTube 모달 -->
  <YouTubeModal
    :is-open="isYouTubeModalOpen"
    :youtube-id="youtubeVideoId"
    @close="handleCloseModal"
    @update:is-open="(value: boolean) => (isYouTubeModalOpen = value)"
  />
</template>
