<script lang="ts" setup>
const props = defineProps<{
  images: string[];
  imageTitle: string;
}>();

const currentIndex = ref(0);
const direction = ref<"left" | "right">("left");

const goToPrevious = () => {
  if (!props.images.length) return;
  direction.value = "right";
  currentIndex.value =
    (currentIndex.value - 1 + props.images.length) % props.images.length;
};

const goToNext = () => {
  if (!props.images.length) return;
  direction.value = "left";
  currentIndex.value = (currentIndex.value + 1) % props.images.length;
};

const goToSlide = (index: number) => {
  if (index >= 0 && index < props.images.length) {
    direction.value = index > currentIndex.value ? "left" : "right";
    currentIndex.value = index;
  }
};
</script>

<template>
  <div class="relative w-full">
    <div class="relative aspect-[3/2] w-full overflow-hidden">
      <TransitionGroup
        :name="`slide-${direction}`"
        tag="div"
        class="relative h-full w-full"
      >
        <div
          v-if="images[currentIndex]"
          :key="currentIndex"
          class="absolute inset-0"
        >
          <NuxtImg
            :src="images[currentIndex]"
            class="gallery-media"
            :alt="`${imageTitle}-${currentIndex + 1}`"
            :width="627"
            :height="418"
          />
        </div>
      </TransitionGroup>
    </div>

    <!-- Controls -->
    <div
      v-if="images.length > 1"
      class="relative z-10 mt-6 flex items-center justify-center gap-6"
    >
      <button
        class="bg-surface-background border-surface-border flex-shrink-0 cursor-pointer rounded border p-3"
        aria-label="Previous image"
        @click="goToPrevious"
      >
        <SvgGradientFullArrowLeft class="rtl:scale-x-[-1]" />
      </button>

      <!-- Pagination -->
      <div class="flex flex-wrap items-center justify-center gap-2">
        <div
          v-for="(image, index) in images"
          :key="`pagination-${index}`"
          class="pagination-dot"
          :class="{ active: currentIndex === index }"
          @click="goToSlide(index)"
        />
      </div>

      <button
        class="bg-surface-background border-surface-border flex-shrink-0 cursor-pointer rounded border p-3"
        aria-label="Next image"
        @click="goToNext"
      >
        <SvgGradientFullArrowRight class="rtl:scale-x-[-1]" />
      </button>
    </div>
  </div>
</template>

<style scoped>
.gallery-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pagination */
.pagination-dot {
  width: 28px;
  height: 6px;
  border-radius: 2px;
  background-color: var(--surface-background);
  border: 1px solid var(--surface-border);
  cursor: pointer;
  transition: all 0.3s ease;
}
.pagination-dot:hover {
  transform: scale(1.1);
}
.pagination-dot.active {
  background-color: var(--foreground);
}

.dark .pagination-dot {
  background-color: rgba(75, 85, 99, 0.5);
}
.dark .pagination-dot.active {
  background-color: var(--foreground);
}

/* Slide left */
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition:
    transform 0.4s ease,
    opacity 0.4s ease;
}
.slide-left-enter-from {
  transform: translateX(100%);
  opacity: 0;
}
.slide-left-enter-to {
  transform: translateX(0);
  opacity: 1;
}
.slide-left-leave-from {
  transform: translateX(0);
  opacity: 1;
}
.slide-left-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}

/* Slide right */
.slide-right-enter-from {
  transform: translateX(-100%);
  opacity: 0;
}
.slide-right-enter-to {
  transform: translateX(0);
  opacity: 1;
}
.slide-right-leave-from {
  transform: translateX(0);
  opacity: 1;
}
.slide-right-leave-to {
  transform: translateX(100%);
  opacity: 0;
}
</style>
