<script setup>
import { Carousel, Navigation, Slide } from 'vue3-carousel'
import { useWindowSize } from '@vueuse/core'
import 'vue3-carousel/dist/carousel.css'

import manuntencao from '@images/icons/manuntencao.webp'
import encanador from '@images/icons/encanador.webp'
import faztudo from '@images/icons/faz-tudo.webp'
import madereiro from '@images/icons/madereiro.webp'
import pedreiro from '@images/icons/pedreiro.webp'
import pintor from '@images/icons/pintor.webp'
import eletricista from '@images/icons/eletricista.webp'

const { width: windowWidth } = useWindowSize();

const isMobile = ref(false)
isMobile.value = windowWidth.value < 768

watch(windowWidth, () => {
    isMobile.value = windowWidth.value < 768
})

const router = useRouter()

const currentSlideModel = ref(0);

const itens = [
    {
        img: manuntencao,
        alt: "Manuntenção",
        route: "/construcao"
    },
    {
        img: encanador,
        alt: "Encanador",
        route: "/construcao"
    },
    {
        img: faztudo,
        alt: "Faz Tudo",
        route: "/construcao"
    },
    {
        img: pedreiro,
        alt: "Pedreiro",
        route: "/construcao"
    },
    {
        img: pintor,
        alt: "Pintor",
        route: "/construcao"
    },
    {
        img: eletricista,
        alt: "Eletricista",
        route: "/construcao"
    }
]
////
const reset = () => {
    if(currentSlideModel.value + 1 === 6 || currentSlideModel.value === 6) {
        setTimeout(() => {
            currentSlideModel.value = 0
        }, 4000)
    }
}
</script>

<template>

    <div class="d-flex flex-wrap gap-6 justify-center" v-if="!isMobile">
        <v-img v-for="(item, index) in itens" :key="index" :lazy-src="item.img" :src="item.img" :alt="item.alt"
            width="400" style="max-width: 400px;" @click="router.push(item.route)" class="cursor-pointer img-servicos" />
    </div>

    <Carousel v-if="isMobile" :items-to-show="1" ref="carousel" v-model="currentSlideModel" :autoplay="4000" @slide-end="reset">
        <template #slides="{ slideWidth, currentSlide }">
            <Slide v-for="(item, index) in itens" :key="index">
                <div class="pa-3 w-100 h-100">
                    <v-img :lazy-src="item.img" :src="item.img" :alt="item.alt" :width="slideWidth"
                        @click="router.push(item.route)" class="cursor-pointer img-servicos" />
                </div>
            </Slide>
        </template>
    </Carousel>

</template>

<style>
.img-servicos {
    border-radius: 6px;
    transition: all 0.3s;
}

.img-servicos:hover {
    transform: scale(1.05);
}
</style>