<script setup lang="ts">

// types

import { Swiper, SwiperSlide } from "swiper/vue";
import type { SwiperClass } from "swiper/react";

type Props = {}

// props

const props = defineProps<Props>();
const {} = toRefs(props);

// state

const swiper_instance = ref<SwiperClass | null>(null);

const slides = [
    {
        id: 0,
        title: "TEST"
    },
    {
        id: 1,
        title: "TEST"
    },
    {
        id: 2,
        title: "TEST"
    },
    {
        id: 3,
        title: "TEST"
    },
    {
        id: 4,
        title: "TEST"
    }
];

// methods

const onSwiper = (swiper: SwiperClass) => {
    swiper_instance.value = swiper;
};

</script>

<template>
    <div class="w-full my-20 relative">
        <Swiper
            :slides-per-view="3.65"
            :space-between="20"
            :slides-offset-after="125"
            :slides-offset-before="125"
            @swiper="onSwiper"
        >
            <SwiperSlide
                v-for="slide in slides"
                :key="slide.id"
            >
                <CategoryCard
                    category="یک دسته بندی تست"
                    picture="/img/product-1.jpg"
                    :count="20"
                    description="یک دسته بندی تستasdasd"
                />
            </SwiperSlide>
        </Swiper>

        <div
            v-if="!swiper_instance?.isBeginning"
            @click="swiper_instance?.slidePrev()"
            class="absolute z-20 right-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] bg-white rounded-full size-11.5 flex justify-center items-center"
        >
            <Icon
                name="ci:arrow-right"
                class="**:stroke-black"
                size="24"
            />
        </div>

        <div
            v-if="!swiper_instance?.isEnd"
            @click="swiper_instance?.slideNext()"
            class="absolute z-20 left-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] bg-white rounded-full size-11.5 flex justify-center items-center"
        >
            <Icon
                name="ci:arrow-left"
                class="**:stroke-black"
                size="24"
            />
        </div>
    </div>
</template>