<template>
  <section>
    <div class="relative overflow-hidden bg-gray-50 max-md:px-4">
        <div
            class="flex w-full transition-transform duration-500 ease-in-out"
            :style="{ transform: `translateX(-${currentIndex * 100}%)` }"
        >
          <div
              v-for="(feature, index) in slides.data"
              :key="index"
              class="w-full flex-shrink-0 py-10"
          >
            <div class="pb-container flex flex-col-reverse lg:flex-row gap-8 xl:gap-x-16">
              <article class="flex-1 flex flex-col justify-center gap-8">
              <span class="flex items-center gap-1">
                <template v-for="star in 5">
                  <Star class="w-5 h-5 text-yellow-100"></Star>
                </template>
              </span>
                <h3 class="font-medium text-2xl md:text-3xl md:leading-[38px]" v-html="feature.description"></h3>
                <p class="text-gray-600">{{ feature.title }}</p>
              </article>
              <div class="h-[480px] w-full md:w-[560px] lg:h-[300px] lg:w-[350px] xl:h-[480px] xl:w-[560px]">
                <img
                    v-if="feature.featured_image"
                    :src="feature.featured_image"
                    alt="Audience smiling"
                    class="rounded-tl-3xl rounded-br-3xl w-full h-full object-cover"
                />
                <img
                    v-else
                    class="rounded-tl-3xl rounded-br-3xl  object-cover"
                    src="@/assets/img/no_image_available.jpeg"
                    alt="No Image Available">
              </div>
            </div>
          </div>
        </div>

        <!-- Controls -->
        <footer class="pb-container flex gap-4 relative">
          <div class="absolute bottom-[40px] right-0 md:right-[120px] xl:left-[120px] gap-4 flex">
            <button
                type="button"
                @click="prevSlide"
                class="w-12 h-12 border border-gray-200 rounded-full flex items-center justify-center bg-gray-50"
            >
              <ArrowLeft class="w-6 h-6 text-gray-500"></ArrowLeft>
            </button>
            <button
                type="button"
                @click="nextSlide"
                class="w-12 h-12 border border-gray-200 rounded-full flex items-center justify-center bg-gray-50"
            >
              <ArrowRight class="w-6 h-6 text-gray-500"></ArrowRight>
            </button>
          </div>
        </footer>
    </div>
  </section>
</template>

<script setup>
import {ref, computed} from 'vue'
import ArrowLeft from '@/assets/img/icons/arrow-left.svg'
import ArrowRight from '@/assets/img/icons/arrow-right.svg'
import Star from '@/assets/img/icons/star.svg'

const props = defineProps({
  section: {
    required: true,
    type: Object,
  },
});

const section = ref(props.section);
const slides = computed(() => {
  return section.value.components.find((component) => component.type === "testimonial_slider");
});

const currentIndex = ref(0)

function nextSlide() {
  currentIndex.value = (currentIndex.value + 1) % slides.value?.data?.length
}

function prevSlide() {
  currentIndex.value = (currentIndex.value - 1 + slides.value?.data?.length) % slides.value?.data?.length
}
</script>