<template>
  <Carousel itemsToShow="1" :wrapAround="true" class="overflow-visible w-full">
    <Slide v-for="banner in data" :key="banner.sort_order">
      <div class="relative w-full" style="padding-bottom: 56.25%; position: relative">
        <img :src="banner.thumbnail" class="absolute inset-0 w-full h-full" alt="Noodle Image" />
      </div>
    </Slide>

    <template class="relative" #addons>
      <Navigation class="lg:visible md:invisible invisible" />
    </template>
  </Carousel>
</template>

<script setup>
defineProps(["data"]);
const breakpoints = {
  300: {
    itemsToShow: 1,
    snapAlign: "start",
  },
  400: {
    itemsToShow: 1,
    snapAlign: "start",
  },
  600: {
    itemsToShow: 1,
    snapAlign: "start",
  },
  1024: {
    itemsToShow: 1,
    snapAlign: "start",
  },
};
const newData = ref([
  {
    image: "/images/pr-banner-1.webp",
  },
  {
    image: "/images/pr-banner-2.webp",
  },
  {
    image: "/images/pr-banner-2.webp",
  },
  // Add more items as needed...
]);
const currentIndex = ref(0);

// Function to show the next item
const nextItem = () => {
  if (currentIndex.value < newData.value.length - 1) {
    currentIndex.value++;
  } else {
    currentIndex.value = 0; // kembali ke slide pertama
  }
};
</script>

<script>
import "vue3-carousel/dist/carousel.css";
import { Carousel, Slide, Pagination, Navigation } from "vue3-carousel";
import VideoList from "./CardNoodles.vue";

export default {
  components: {
    VideoList,
    Carousel,
    Slide,
  },
  data() {
    return {
      itemss: [
        {
          image: "/images/pr-banner-1.webp",
        },
        {
          image: "/images/pr-banner-2.webp",
        },
        {
          image: "/images/pr-banner-3.webp",
        },
      ],
    };
  },
};
</script>

<style>
.carousel__pagination-button--active::after {
  background-color: #dff500;
}

.carousel__item {
  text-align: left;
}

.carousel__icon {
  @apply text-black;
  width: 100px;
  height: 100px;
}

.carousel__prev {
  width: 30px;
  height: 30px;
  margin-left: 120px !important;
  margin-bottom: 120px;
  background-color: #b7b7b759;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center; /* Center the SVG */
  svg {
    display: none;
  }
}

.carousel__prev::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: black; /* Fallback color */
  mask: url("/icon/left.svg") no-repeat center;
  -webkit-mask: url("/icon/left.svg") no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
}
.carousel__prev {
  width: 55px;
  height: 55px;
  margin-left: 50px;
  background-color: #b7b7b759;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center; /* Center the SVG */
  svg {
    display: none;
  }
}

.carousel__prev::before {
  content: "";
  display: block;
  width: 35px;
  height: 35px;
  background-color: black; /* Fallback color */
  mask: url("/icon/left.svg") no-repeat center;
  -webkit-mask: url("/icon/left.svg") no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

.carousel__next {
  margin-right: 50px;
  width: 55px;
  height: 55px;
  background-color: #b7b7b759;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center; /* Center the SVG */
  svg {
    display: none;
  }
}
.carousel__next::before {
  content: "";
  display: block;
  width: 35px;
  height: 35px;
  background-color: black; /* Fallback color */
  mask: url("/icon/right.svg") no-repeat center;
  -webkit-mask: url("/icon/right.svg") no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

.pagination-white {
  button::after {
    @apply bg-gray-500;
  }

  button:hover::after {
    @apply bg-white;
  }

  .carousel__pagination-button--active::after {
    @apply bg-white;
  }
}
.carousel__item {
  text-align: left;
}

.carousel__icon {
  @apply text-black;
}

li {
  /* width: 50% !important; */
}

.pagination-white {
  button::after {
    @apply bg-gray-500;
  }

  button:hover::after {
    @apply bg-white;
  }

  .carousel__pagination-button--active::after {
    @apply bg-white;
  }
}
</style>
