<script setup lang="ts">

// import

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

// types

type Props = {}

// props

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

// state

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

// methods

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

</script>

<template>
    <div class="relative max-h-[700px] flex justify-center items-center h-svh w-full">
        <img
            class="absolute size-full object-cover"
            src="/img/hero-bg.jpg"
            alt=""
        />
        <div class="absolute bg-black/60 size-full z-10" />

        <div class="w-full relative z-10">
            <Swiper
                :slides-per-view="1"
                :loop="true"
                :space-between="40"
                :centered-slides="true"
                :grab-cursor="true"
                @swiper="onSwiper"
            >
                <SwiperSlide
                    v-for="i in 6"
                    :key="i"
                >
                    <div class="flex justify-center items-center">
                        <div class="max-w-[900px] px-4 text-white flex flex-col items-center gap-4">
                            <Icon name="ci:instagram" size="28" class="**:stroke-white" />
                            <p class="text-base xs:text-lg sm:typo-h-6 lg:typo-h-5 !font-normal !leading-[150%] lg:leading-[175%] max-sm:px-4 sm:max-w-[600px] lg:max-w-[800px] text-center">
                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
                                استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله
                                در ستون و سطرآنچنان که لازم.
                            </p>
                            <span class="typo-p-sm md:typo-p-xl text-center">
                                 - منصور مرزبان
                            </span>
                        </div>
                    </div>
                </SwiperSlide>
            </Swiper>

            <div class="flex items-center justify-center gap-3 text-white mt-6 relative z-10">
                <div
                    v-for="(i, index) in 6"
                    :class="swiper_instance?.realIndex === index ? 'bg-white' : 'bg-transparent'"
                    class="border border-white size-1.5 md:size-2 rounded-full transition-all duration-200"
                >
                </div>
            </div>

        </div>
    </div>
</template>