<script setup lang="ts">
import { SplideSlide } from '@splidejs/vue-splide'
import type { ListOperateGroupItem } from '#layers/types/api/resourcesData'
import type { SlideItemSize } from '#layers/types/components/slide'

interface BannerListProps {
  resourcesData: ListOperateGroupItem[]
  slideItemSize: SlideItemSize
  arrows?: boolean
  pagination?: boolean
  class?: string
}

const props = withDefaults(defineProps<BannerListProps>(), {
  arrows: true,
  pagination: true,
})
</script>

<template>
  <BlocksSlideCenterHighlight
    :slide-item-size="props.slideItemSize"
    :slide-item-length="props.resourcesData.length"
    :pagination="false"
    class="mt-[36px] md:mt-[60px]"
  >
    <SplideSlide v-for="(item, index) in props.resourcesData" :key="index">
      <BlocksCardNews
        :title="item.title"
        :description="item.option01"
        :img-path="getResolvedHost(item.img_path)"
        :url="item.url"
        :link-target="item.link_target"
        class="slide-inner"
      />
    </SplideSlide>
  </BlocksSlideCenterHighlight>
</template>

<style scoped>
.center-highlight:deep(.splide__slide.is-active .card-link) {
  pointer-events: auto;
}
.center-highlight:deep(.splide__slide .card-link) {
  pointer-events: none;
}
</style>
