<script setup lang="ts">
import { SplideSlide } from '@splidejs/vue-splide'
import {
  getComponentContainer,
  getComponentGroupAry,
} from '#layers/utils/dataUtil'
import type { PageDataTemplateComponents } from '#layers/types/api/pageData'

interface Props {
  components: PageDataTemplateComponents
  pageVerTmplSeq: number
}

const props = defineProps<Props>()

const slideData = computed(() => {
  return getComponentContainer(props.components, 'group_sets', { maxLength: 7 })
})
const paginationData = computed(() => {
  return getComponentGroupAry(props.components, 'pagination')
})
</script>

<template>
  <section class="section-standard">
    <BlocksSlideThumbnail
      :slide-data="slideData"
      :pagination-data="paginationData"
    >
      <SplideSlide v-for="(item, index) in slideData" :key="index">
        <WidgetsBackground
          v-if="hasComponentGroup(item, 'background')"
          :resources-data="getComponentGroup(item, 'background')"
        />
        <div class="content-standard">
          <WidgetsMainTitle
            v-if="hasComponentGroup(item, 'mainTitle')"
            :resources-data="getComponentGroup(item, 'mainTitle')"
            class="title-lg"
          />
          <WidgetsSubTitle
            v-if="hasComponentGroup(item, 'subTitle')"
            :resources-data="getComponentGroup(item, 'subTitle')"
            class="title-md mt-0.5 line-clamp-3 md:mt-1 md:line-clamp-2"
          />
          <WidgetsDescription
            v-if="hasComponentGroup(item, 'description')"
            :resources-data="getComponentGroup(item, 'description')"
            class="mt-4 md:mt-6"
          />
        </div>
      </SplideSlide>
    </BlocksSlideThumbnail>
  </section>
</template>
