<script lang="ts" setup>
import Icon1 from "~/components/svg/Advantages/Icon-1.vue";
import Icon2 from "~/components/svg/Advantages/Icon-2.vue";
import Icon3 from "~/components/svg/Advantages/Icon-3.vue";
import Icon4 from "~/components/svg/Advantages/Icon-4.vue";
import Icon5 from "~/components/svg/Advantages/Icon-5.vue";
import type { CardData } from "~/types/Advantages";

const { locale } = useI18n();
const dir = computed(() => (locale.value === "ar" ? "rtl" : "ltr"));

const swiperRef = ref(null);
const swiper = useSwiper(swiperRef, {
  slidesPerView: "auto",
  spaceBetween: 12,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
    pauseOnMouseEnter: true,
  },
  keyboard: { enabled: true },
  grabCursor: true,
  loop: true,
  breakpoints: {
    640: {
      spaceBetween: 24,
    },
  },
});

const cards: CardData[] = [
  {
    id: 1,
    title: "advantages.card.title1",
    description: "advantages.card.description1",
    icon: Icon1,
  },
  {
    id: 2,
    title: "advantages.card.title2",
    description: "advantages.card.description2",
    icon: Icon2,
  },
  {
    id: 3,
    title: "advantages.card.title3",
    description: "advantages.card.description3",
    icon: Icon3,
  },
  {
    id: 4,
    title: "advantages.card.title4",
    description: "advantages.card.description4",
    icon: Icon4,
  },
  {
    id: 5,
    title: "advantages.card.title5",
    description: "advantages.card.description5",
    icon: Icon5,
  },
  {
    id: 1,
    title: "advantages.card.title1",
    description: "advantages.card.description1",
    icon: Icon1,
  },
  {
    id: 2,
    title: "advantages.card.title2",
    description: "advantages.card.description2",
    icon: Icon2,
  },
  {
    id: 3,
    title: "advantages.card.title3",
    description: "advantages.card.description3",
    icon: Icon3,
  },
  {
    id: 4,
    title: "advantages.card.title4",
    description: "advantages.card.description4",
    icon: Icon4,
  },
  {
    id: 5,
    title: "advantages.card.title5",
    description: "advantages.card.description5",
    icon: Icon5,
  },
];
</script>
<template>
  <div class="relative overflow-x-hidden">
    <div class="relative container mx-auto h-[400px]">
      <div
        class="card-adv absolute start-0 top-0 bottom-0 w-full ps-4 sm:w-[100vw]"
      >
          <swiper-container
            v-if="cards && cards.length > 0"
            ref="swiperRef"
            :key="dir"
            :dir="dir"
            :init="false"
            class="h-full w-full"
          >
            <swiper-slide
              v-for="(card, index) in cards"
              :key="card.id"
              class="flex !h-full !w-auto items-stretch"
              :aria-hidden="index > 4"
            >
              <div
                class="relative flex min-h-[384px] min-w-[350px] flex-col items-center bg-[url('/images/advantages-bg.svg')] bg-contain bg-center bg-no-repeat pt-12"
              >
                <span class="mb-12">
                  <component :is="card.icon" />
                </span>
                <h3
                  class="dark-text-gradient mb-7 max-w-[220px] text-center text-xl leading-snug font-bold"
                >
                  {{ $t(card.title) }}
                </h3>
                <p
                  class="text-primary max-w-[282px] text-center text-sm leading-6 xl:text-base"
                >
                  {{ $t(card.description) }}
                </p>
                <div
                  class="text-primary absolute bottom-0 left-0 grid h-[65px] w-[50px] place-items-center text-center"
                >
                  0{{ card.id }}
                </div>
              </div>
            </swiper-slide>
          </swiper-container>
      </div>
    </div>
  </div>
</template>

<style scoped>
swiper-slide {
  height: auto;
  display: flex;
  align-items: stretch;
}

swiper-container {
  width: 100%;
  height: auto;
}

@media (max-width: 370px) {
  .card-adv {
    padding-inline-start: 8px;
  }
}
</style>
