<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue'
import { EffectFade, Navigation, Pagination } from 'swiper/modules'
import { getResponsiveClass, getResponsiveSrc } from '#layers/utils/dataUtil'

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

const props = defineProps<Props>()

const arrow = computed(() => {
  return props.components.arrow.groups
})

const modules = [EffectFade, Navigation, Pagination]
</script>

<template>
  <section class="relative h-[640px] md:h-[1000px]">
    <Swiper
      :modules="modules"
      :loop="true"
      effect="fade"
      :pagination="
        {
          el: '.slide-pagination',
          clickable: true,
        } as any
      "
      :navigation="
        {
          nextEl: '.slide-next',
          prevEl: '.slide-prev',
        } as any
      "
      class="h-full"
    >
      <SwiperSlide
        v-for="group in props.components.group_sets"
        :key="group.set_order"
        class="bg-black"
      >
        <WidgetsBackground
          v-if="group?.background.groups"
          :resources-data="group.background.groups[0]"
        />
        <div
          class="relative h-full flex flex-col items-center justify-center gap-[14px] text-center md:gap-5"
        >
          <WidgetsSubTitle
            v-if="group.subTitle && group.subTitle.groups"
            :resources-data="group.subTitle.groups[0]"
            class="line-clamp-2 text-[16px] font-[500] leading-[24px] md:line-clamp-1 md:text-[24px] md:leading-[34px]"
          />
          <WidgetsMainTitle
            v-if="group.mainTitle && group.mainTitle.groups"
            :resources-data="group.mainTitle.groups[0]"
            class="line-clamp-3 text-[24px] font-[700] leading-[34px] md:text-[50px] md:leading-[70px]"
          />
          <WidgetsDescription
            v-if="group.description && group.description.groups"
            :resources-data="group.description.groups[0]"
            class="line-clamp-3 text-[15px] font-[400] leading-[24px] md:text-[20px] md:leading-[30px]"
          />
          <WidgetsButtonList
            v-if="group.buttonList && group.buttonList.groups"
            :groups-data="group.buttonList.groups"
          />
        </div>
      </SwiperSlide>

      <div class="slide-pagination" />

      <!-- Navigation buttons -->
      <div
        class="slide-prev hidden md:block"
        :class="getResponsiveClass()"
        :style="
          getResponsiveSrc(arrow[0].res_path, {
            resourcesType: 'bg',
          })
        "
      >
        <span class="sr-only">prev</span>
      </div>
      <div
        class="slide-next hidden md:block"
        :class="getResponsiveClass()"
        :style="
          getResponsiveSrc(arrow[1].res_path, {
            resourcesType: 'bg',
          })
        "
      >
        <span class="sr-only">next</span>
      </div>
    </Swiper>
  </section>
</template>
