<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

// import img1 from '/resources/assets/images/1.jpg'

const slides = ref([
    { image: 'https://cdn.pixabay.com/photo/2021/09/12/18/07/robin-6619184_1280.jpg', title: 'Slide 1', description: 'Description for Slide 1', animation: 'fade' },
    { image: 'https://cdn.pixabay.com/photo/2022/12/13/17/55/robin-7653878_1280.jpg', title: 'Slide 2', description: 'Description for Slide 2', animation: 'zoom' },
    { image: 'https://cdn.pixabay.com/photo/2017/03/05/21/06/bird-2119874_1280.jpg', title: 'Slide 3', description: 'Description for Slide 3', animation: 'rotate' },
    { image: 'https://cdn.pixabay.com/photo/2016/11/19/14/52/bird-1839689_1280.jpg', title: 'Slide 4', description: 'Description for Slide 4', animation: 'slide-up' },
    { image: 'https://cdn.pixabay.com/photo/2015/06/22/22/41/robin-818126_1280.jpg', title: 'Slide 5', description: 'Description for Slide 5', animation: 'slide-down' }
]);

const currentIndex = ref(0);
const slideInterval = ref(null);
const slideSpeed = 3000; // 3 seconds per slide

const nextSlide = () => {
    currentIndex.value = (currentIndex.value + 1) % slides.value.length;
};

const prevSlide = () => {
    currentIndex.value = (currentIndex.value - 1 + slides.value.length) % slides.value.length;
};

const goToSlide = (index) => {
    currentIndex.value = index;
};

const startAutoSlide = () => {
    slideInterval.value = setInterval(nextSlide, slideSpeed);
};

const pauseAutoSlide = () => {
    clearInterval(slideInterval.value);
};

onMounted(startAutoSlide);
onUnmounted(pauseAutoSlide);
</script>

<template>
<!--    <img :src="img1" alt="">-->



    <div class="relative w-full max-w-3xl mx-auto overflow-hidden">
        <!-- Slides -->
        <div
            class="flex transition-transform ease-in-out duration-500"
            :style="{ transform: `translateX(-${currentIndex * 100}%)` }"
            @mouseenter="pauseAutoSlide"
            @mouseleave="startAutoSlide"
        >
            <div v-for="(slide, index) in slides" :key="index" class="w-full flex-shrink-0"

                 :class="{
          'opacity-100': index === currentIndex,
          'animate-fade': slide.animation === 'fade',
          'animate-zoom': slide.animation === 'zoom',
          'animate-rotate': slide.animation === 'rotate',
          'animate-slide-up': slide.animation === 'slide-up',
          'animate-slide-down': slide.animation === 'slide-down',
        }"

            >
                <img :src="slide.image" :alt="slide.title" class="w-full h-64 object-cover rounded-lg" />
                <div class="p-4 bg-white text-center">
                    <h2 class="text-xl font-semibold">{{ slide.title }}</h2>
                    <p class="text-gray-600">{{ slide.description }}</p>
                    <button class="mt-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
                        More Details
                    </button>
                </div>
            </div>
        </div>

        <!-- Navigation Buttons -->
        <button
            class="absolute top-1/2 left-2 transform -translate-y-1/2 bg-gray-800 text-white p-2 rounded-full"
            @click="prevSlide"
        >‹</button>
        <button
            class="absolute top-1/2 right-2 transform -translate-y-1/2 bg-gray-800 text-white p-2 rounded-full"
            @click="nextSlide"
        >›</button>

        <!-- Dots Navigation -->
        <div class="flex justify-center mt-4">
      <span
          v-for="(slide, index) in slides"
          :key="index"
          class="w-3 h-3 mx-1 rounded-full cursor-pointer"
          :class="index === currentIndex ? 'bg-blue-500' : 'bg-gray-300'"
          @click="goToSlide(index)"
      ></span>
        </div>
    </div>
</template>

<style scoped>
/* Animations */
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes zoom-in {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@keyframes rotate-in {
    from { transform: rotate(-180deg); opacity: 0; }
    to { transform: rotate(0deg); opacity: 1; }
}
@keyframes slide-up {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes slide-down {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Apply animations */
.animate-fade { animation: fade-in 1s ease-in-out; }
.animate-zoom { animation: zoom-in 1s ease-in-out; }
.animate-rotate { animation: rotate-in 1s ease-in-out; }
.animate-slide-up { animation: slide-up 1s ease-in-out; }
.animate-slide-down { animation: slide-down 1s ease-in-out; }
</style>
