<script setup lang="ts">
import { getComponentGroup } from '#layers/utils/dataUtil'

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

const props = defineProps<Props>()

const backgroundData = computed(() =>
  getComponentGroup(props.components, 'background')
)
const mainTitleData = computed(() =>
  getComponentGroup(props.components, 'mainTitle')
)
const slideThumbnailData = computed(() => props.components.group_sets)
const videoPlayData = computed(() =>
  getComponentGroup(props.components, 'videoPlay')
)
</script>

<template>
  <section class="section-container">
    <WidgetsBackground v-if="backgroundData" :resources-data="backgroundData" />
    <div class="section-content">
      <WidgetsMainTitle
        v-if="mainTitleData"
        :resources-data="mainTitleData"
        class="main-title"
      />
      <BlocksSlideThumbnail
        :slide-item-list="slideThumbnailData"
        :video-play="videoPlayData"
      />
    </div>
  </section>
</template>

<style scoped>
.main-title {
  @apply text-center text-[16px] font-medium leading-[24px] tracking-[-0.48px] md:text-[24px] md:leading-[34px] md:tracking-[-0.72px];
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
  font-family: 'Spoqa Han Sans Neo', sans-serif;
}
</style>
