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

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

// types

type Props = {
    title: 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-[4rem] py-[5rem] container">
        <div class="w-full flex justify-between items-center">
            <span class="text-black typo-h-3">
                {{ title }}
            </span>
            <div class="flex-center gap-[.5rem]">
                <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-[2.75rem] rounded-full border-[1.5px] click-effect flex-center"
                >
                    <Icon
                        name="ci:chevron-right"
                        :class="
                            swiper_instance?.isBeginning
                                ? '**:stroke-slate-200'
                                : '**:stroke-black'
                        "
                        size="24"
                    />
                </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-[2.75rem] rounded-full border-[1.5px] click-effect flex-center"
                >
                    <Icon
                        name="ci:chevron-left"
                        :class="
                            swiper_instance?.isEnd
                                ? '**:stroke-slate-200'
                                : '**:stroke-black'
                        "
                        size="24"
                    />
                </button>
            </div>
        </div>
        <div class="w-full">
            <Swiper :slides-per-view="3" :space-between="24" @swiper="onSwiper">
                <SwiperSlide v-for="i in 4" :key="i">
                    <ProductCard
                        brand="Samsung"
                        title="Galaxy S20 Ultra"
                        picture="/assets/img/product-1.jpg"
                        :colors="['#0000ff', '#00ff00', 'red']"
                        :price="599"
                        :rate="2.4"
                        tag="New"
                    />
                </SwiperSlide>
            </Swiper>
        </div>
    </section>
</template>

<style scoped></style>
