<script setup lang="ts">
// imports

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

// types

type Props = {
    title: string;
    products: ProductListItem[];
    iconImage: string;
};

// props

defineProps<Props>();

// state

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

// methods

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

<template>
    <section class="w-full flex flex-col gap-10 md:gap-16 lg:container">
        <div class="w-full flex justify-between items-center max-lg:container">
            <div class="flex gap-2 items-center">
                <NuxtImg :src="iconImage" class="size-8 sm:size-14" />
                <span class="text-black typo-h-6 md:typo-h-5 lg:typo-h-4">
                    {{ title }}
                </span>
            </div>
            <div class="flex-center gap-2">
                <button
                    @click="swiper_instance?.slidePrev()"
                    :disabled="swiper_instance?.isBeginning"
                    :class="
                        swiper_instance?.isBeginning
                            ? 'border-slate-200 cursor-not-allowed'
                            : 'border-black cursor-pointer'
                    "
                    class="size-[30px] md:size-[35px] lg:size-11 rounded-full border-[1.5px] click-effect flex-center"
                >
                    <Icon
                        name="ci:chevron-right"
                        class="size-5 lg:size-6"
                        :class="swiper_instance?.isBeginning ? '**:stroke-slate-200' : '**:stroke-black'"
                    />
                </button>
                <button
                    @click="swiper_instance?.slideNext()"
                    :disabled="swiper_instance?.isEnd"
                    :class="
                        swiper_instance?.isEnd ? 'border-slate-200 cursor-not-allowed' : 'border-black cursor-pointer'
                    "
                    class="size-[30px] md:size-[35px] lg:size-11 rounded-full border-[1.5px] click-effect flex-center"
                >
                    <Icon
                        name="ci:chevron-left"
                        class="size-5 lg:size-6"
                        :class="swiper_instance?.isEnd ? '**:stroke-slate-200' : '**:stroke-black'"
                    />
                </button>
            </div>
        </div>
        <div class="w-full">
            <Swiper
                :slides-per-view="1.5"
                :loop="true"
                :centered-slides="true"
                :space-between="24"
                @swiper="onSwiper"
                :breakpoints="{
                    640: {
                        centeredSlides: true,
                        slidesPerView: 3,
                    },
                    1024: {
                        centeredSlides: false,
                        slidesPerView: 4,
                    },
                }"
            >
                <SwiperSlide
                    v-for="product in products"
                    :key="product.id"
                >
                    <ProductCard
                        :id="product.id"
                        :slug="product.slug"
                        :title="product.name"
                        :picture="product.main_image"
                        :colors="product.colors"
                        :rate="product.rating"
                        :dark-layer="true"
                        :price="product.best_deal_price_before_discount"
                        :tag="product.best_deal_discount > 0 ? `${product.best_deal_discount}% تخفیف` : undefined"
                        :price-after="
                            product.best_deal_discount > 0 ? product.best_deal_price_after_discount : undefined
                        "
                    />
                </SwiperSlide>
            </Swiper>
        </div>
    </section>
</template>

<style scoped></style>
