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

interface Props {
  components: PageDataTemplateComponents
  pageVerTmplSeq: number
}

const props = defineProps<Props>()

const backgroundData = computed(() =>
  getComponentGroup(props.components, 'background')
)
const mainTitleData = computed(() =>
  getComponentGroup(props.components, 'mainTitle')
)
const subTitleData = computed(() =>
  getComponentGroup(props.components, 'subTitle')
)
const descriptionData = computed(() =>
  getComponentGroup(props.components, 'description')
)
const imgListData = computed(() => {
  return getComponentGroupAry(props.components, 'imgList')
})
const buttonListData = computed(() => {
  return getComponentGroupAry(props.components, 'buttonList')
})
</script>

<template>
  <section class="relative py-[80px] md:py-[120px]">
    <WidgetsBackground v-if="backgroundData" :resources-data="backgroundData" />
    <div class="content-standard">
      <WidgetsMainTitle
        v-if="mainTitleData"
        :resources-data="mainTitleData"
        class="title-xlg"
      />
      <WidgetsSubTitle
        v-if="subTitleData"
        :resources-data="subTitleData"
        class="title-sm mt-2"
      />
      <div v-if="imgListData" class="img-container">
        <div v-for="(item, index) in imgListData" :key="index" class="img-item">
          <AtomsImg
            v-if="getImagePaths(item)"
            :src="getImagePaths(item)"
            :alt="item?.display?.text"
            class="w-full object-contain"
          />
        </div>
      </div>
      <WidgetsButtonList
        v-if="buttonListData"
        :resources-data="buttonListData"
        :page-ver-tmpl-seq="props.pageVerTmplSeq"
        class="mt-[56px]"
      />
      <WidgetsDescription
        v-if="descriptionData"
        :resources-data="descriptionData"
        class="mt-8"
      />
    </div>
  </section>
</template>

<style scoped>
.img-container {
  @apply flex flex-col items-center justify-center gap-4 box-content mx-auto mt-[32px]
  w-[440px]
  md:w-[944px];
}
.img-item {
  @apply w-full;
}
</style>
