<template>
      <div class="container banks-container">
      <div class="text d-flex flex-column align-items-center text-center">
        <h4 class="mobileHead">
          {{ $t("banks1") }}
        </h4>
        <p>
          {{ $t("banks2") }}
        </p>
      </div>
      <div class="banks mt-5">
        <div class="row justify-content-center align-items-center">
          <!-- <div
            class="col-6 col-xl-2 col-lg-3 col-md-4 mb-4"
            v-for="item in store.banks"
          >
            <img :src="item?.image" alt="" />
          </div> -->
        </div>
  
        <ClientOnly>
        <swiper
          :modules="[SwiperAutoplay , SwiperPagination]"
          :pagination="{ clickable: true }"
          :autoplay="{
            delay: 1500,
            disableOnInteraction: false,
          }"
          :breakpoints="{
            '300': {
              slidesPerView: 2,
              spaceBetween: 20,
            },
            '768': {
              slidesPerView: 3,
              spaceBetween: 40,
            },
            '1024': {
              slidesPerView: 6,
              spaceBetween: 50,
            },
          }"
          class="bankSwiper"
        >
          <swiper-slide v-for="(item, index) in store.banks" :key="item">
            <img :src="item?.image" :alt="item?.name || `Partner bank ${index + 1}`" loading="lazy"/>
          </swiper-slide>
        </swiper>
        </ClientOnly>
      </div>
    </div>
</template>

<script setup>
import { useHomeStore } from "@/stores/home";
import "swiper/css";
import "swiper/css/pagination";

let store = useHomeStore();
</script>

<style lang="scss">
// @import url('@/styles/variables.scss');
.bankSwiper{
    overflow-y: visible;
    .swiper-pagination {
         align-items: center;
         display: flex;
         justify-content: center;
         top: 140% !important;
   
         .swiper-pagination-bullet {
           width: 12px;
           height: 12px;
           border-radius: 5px;
           opacity: 0.38;
           background: #363F4D;
   
           &.swiper-pagination-bullet-active {
             height: 32px;
             opacity: 1;
           }
         }
         }

}
    
</style>