<script setup lang="ts">
import { SplideSlide } from '@splidejs/vue-splide'
import {
  hasComponentGroup,
  getComponentGroup,
  getComponentGroupAry,
} from '#layers/utils/dataUtil'

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

const props = defineProps<Props>()
</script>

<template>
  <section class="section-container">
    <BlocksSlideFade
      v-if="props.components?.group_sets"
      :arrows="true"
      :pagination="true"
      class="h-full"
    >
      <SplideSlide
        v-for="(item, index) in props.components.group_sets"
        :key="index"
      >
        <WidgetsBackground
          v-if="hasComponentGroup(item, 'background')"
          :resources-data="getComponentGroup(item, 'background')"
        />
        <div class="section-content gap-3 md:gap-5">
          <WidgetsSubTitle
            v-if="hasComponentGroup(item, 'subTitle')"
            :resources-data="getComponentGroup(item, 'subTitle')"
            class="title-sm"
          />
          <WidgetsMainTitle
            v-if="hasComponentGroup(item, 'mainTitle')"
            :resources-data="getComponentGroup(item, 'mainTitle')"
            class="title-lg"
          />
          <WidgetsDescription
            v-if="hasComponentGroup(item, 'description')"
            :resources-data="getComponentGroup(item, 'description')"
            class="description-lg"
          />
          <WidgetsButtonList
            v-if="hasComponentGroup(item, 'buttonList')"
            :resources-data="getComponentGroupAry(item, 'buttonList')"
            class="mt-[28px] md:mt-[52px]"
          />
        </div>
      </SplideSlide>
    </BlocksSlideFade>
  </section>
</template>
