<script setup lang="ts">
import { getComponentGroup, getComponentGroupAry } from '#layers/utils/dataUtil'
import type { PageDataTemplateComponents } from '#layers/types/api/pageData'

interface Props {
  components: PageDataTemplateComponents
  pageVerTmplSeq: number
  pageVerTmplNameEn: string
}

const props = defineProps<Props>()

const backgroundData = computed(() =>
  getComponentGroup(props.components, 'background')
)
const mainTitleData = computed(() =>
  getComponentGroup(props.components, 'mainTitle')
)
const descriptionData = computed(() =>
  getComponentGroup(props.components, 'description')
)
const videoPlayData = computed(() =>
  getComponentGroup(props.components, 'videoPlayImg')
)
const buttonListData = computed(() =>
  getComponentGroupAry(props.components, 'buttonList')
)
</script>

<template>
  <section class="section-standard">
    <WidgetsBackground
      v-if="backgroundData"
      :resources-data="backgroundData"
      gradient="h-[208px] bg-[linear-gradient(180deg,rgba(16,13,15,0)_0%,#100D0F_90%)] md:h-[350px]"
    />
    <div class="content-standard gap-4 md:gap-5">
      <WidgetsMainTitle
        v-if="mainTitleData"
        :resources-data="mainTitleData"
        class="w-full max-w-[355px] md:max-w-[944px]"
      />
      <WidgetsDescription
        v-if="descriptionData"
        :resources-data="descriptionData"
        class="w-full max-w-[355px] md:max-w-[944px]"
      />
      <WidgetsVideoPlay
        v-if="videoPlayData"
        category="image"
        :resources-data="videoPlayData"
      />
      <WidgetsButtonList
        v-if="buttonListData"
        :resources-data="buttonListData"
        class="mt-[22px] md:mt-[52px]"
      />
    </div>
  </section>
</template>
