<template>
  <section class="relative py-8 px-4 bg-transparent">
    <Carousel v-bind="config" class="mx-auto max-w-screen-xl">
      <Slide
        v-for="(imgSrc, idx) in images"
        :key="idx"
        class="relative h-64 sm:h-80 md:h-96 lg:h-[500px] overflow-hidden rounded-lg shadow-lg"
      >
        <img
          :src="imgSrc"
          alt="Slide image"
          class="w-full h-full object-cover"
        />
      </Slide>

      <!-- Add navigation arrows and pagination indicators -->
      <template #addons>
        <Navigation />
        <Pagination />
      </template>
    </Carousel>
  </section>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { Carousel, Slide, Navigation, Pagination } from 'vue3-carousel';
import 'vue3-carousel/dist/carousel.css';
import { MAIN_IMAGES } from '@/data/assets';

// Build a simple array of URLs from your MAIN_IMAGES object
const images = computed<string[]>(() => Object.values(MAIN_IMAGES));

// Carousel configuration
const config = {
  height: 500, // fixed height (px); adjust as needed (500px here)
  itemsToShow: 1, // always show one slide at a time
  gap: 0, // no horizontal gap between slides
  wrapAround: true, // loop infinitely
  mouseWheel: false, // disable mouse-wheel navigation
  autoplay: 4000, // change slide every 4 seconds
  pauseAutoplayOnHover: true,
  breakpoints: {
    1280: { itemsToShow: 1, height: 500 }, // ≥2xl
    1024: { itemsToShow: 1, height: 450 }, // ≥xl
    768: { itemsToShow: 1, height: 400 }, // ≥md
    0: { itemsToShow: 1, height: 300 }, // mobile
  },
};
</script>

<style scoped>
/* Customize arrow & pagination colors via CSS variables */
.carousel {
  --vc-nav-background: rgba(255, 255, 255, 0.8);
  --vc-nav-border-radius: 100%;
  --vc-nav-icon-size: 1.25rem;
  --vc-pgn-background-color: rgba(255, 255, 255, 0.5);
  --vc-pgn-active-color: rgba(255, 255, 255, 1);
}

/* Optional: subtle shadow behind navigation buttons */
.carousel__navigation-button {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Ensure all images are rounded and cover the slide area */
img {
  border-radius: 8px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
