<template>
  <div class="flex h-[872px] w-full bg-navy-800 relative rounded-[48px] z-10">
    <Carousel :items-to-show="1" v-model="currentSlide" :autoplay="5000" class="carousel w-full" :wrap-around="true">
      <Slide v-for="(slide, index) in slides" :key="index">
        <div class="lg:p-8 p-4 flex relative w-full">
          <div class="lg:w-1/2 lg:pl-8 lg:pr-16 pl-4 pr-8 flex flex-col lg:mt-[218px] mt-[100px] absolute top-0 left-5 lg:relative">
            <div class="gap-2 flex z-10 mb-4">
              <a v-if="slides.length > 1"
                 v-for="(slide, index) in slides"
                 @click="currentSlide = index" class="w-4 h-1 bg-navy-400 rounded-full cursor-pointer" :class="{'!w-12 !bg-white' : currentSlide === index}"
              ></a>
            </div>
            <h3 class="lg:text-[48px] text-[40px] font-semibold text-white mb-3 lg:leading-normal leading-[48px]">{{ slide?.title }}</h3>
            <p class="text-lg font-normal text-navy-50" v-html="slide?.description"></p>
            <div class="flex gap-3 mt-8 flex-col lg:flex-row">
              <a class="text-white text-base font-semibold border border-white px-6 py-2 rounded-full hover:bg-navy-800 hover:opacity-60"
                 :href="formatUrl(slide.secondary_button.url)"
                 v-if="slide.secondary_button.show"
                 :target="slide.secondary_button.open_in_new_tab ? '_blank' : ''">
                <span>{{ slide.secondary_button.label }}</span>
              </a>
              <a class=" flex items-center gap-2 text-navy-800 bg-white text-base font-semibold border border-white px-6 py-2 rounded-full hover:bg-navy-50"
                 :href="formatUrl(slide.primary_button.url)"
                 v-if="slide.primary_button.show"
                 :target="slide.primary_button.open_in_new_tab ? '_blank' : ''">
                {{ slide.primary_button.label }}
                <ArrowUpRight class="w-5 h-5" />
              </a>
            </div>
          </div>
          <img
              v-if="slide.featured_image"
              :src="slide.featured_image"
              alt="Slide Image"
              class="rounded-[40px] h-[674px] max-w-[882px] lg:w-1/2 w-full object-cover"/>
          <img v-else class="rounded-[40px] h-[674px] max-w-[882px] lg:w-1/2 w-full object-cover" src="@/assets/img/no_image_available.jpeg">
        </div>
      </Slide>
    </Carousel>
  </div>
</template>

<script setup>
import 'vue3-carousel/carousel.css';
import { ref } from "vue";
import ArrowUpRight from '@/assets/img/icons/arrow-up-right.svg';
import {Carousel, Slide} from "vue3-carousel";
import { formatUrl } from "@/components/helpers/common";

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

const currentSlide = ref(0);
const componentData = ref(props.component);
const slides = componentData.value.data.filter((o) => o.public);
</script>

<style scoped>
.carousel {
  margin: 1rem 0;
}
</style>