<template>
  <Carousel
    :breakpoints="breakpoints"
    :mouseDrag="true"
    :wrapAround="true"
    class="overflow-visible w-full"
  >
    <Slide v-for="slide in noodles" :key="slide" class="mx-4 py-16">
      <div class="lg:h-[60vh] md:h-[35vh] lg:pt-20 md:pt-10 pt-10">
        <div
          class="card-slide-noodle shadow-lg bg-white p-4 lg:w-80 md:w-72 w-72 relative"
        >
          <div class="flex justify-center">
            <img
              :src="slide.image"
              alt="Noodle Image"
              class="img-slide-noodle rounded-full h-52 w-52 object-cover shadow-lg"
            />
          </div>
          <h3 class="text-xl font-semibold text-center mt-4 text-[#273A97]">
            {{ slide.title }}
          </h3>
          <div class="h-16">
            <p class="text-center text-gray-600 text-sm mb-4 text-[#959595]">
              {{ slide.description }}
            </p>
          </div>
          <div class="flex justify-center gap-6 mt-4 pb-4">
            <img
              v-for="(icon, index) in slide.icons"
              :key="index"
              :src="icon"
              alt="icon"
              class="h-8 w-8"
            />
          </div>
        </div>
      </div>
    </Slide>

    <template class="relative" #addons>
      <Navigation class="lg:visible md:visible invisible" />
      <div
        class="-mt-12 absolute lg:bottom-[20px] md:bottom-[-36px] right-0 w-full"
      >
        <div class="text-center">
          <pagination class="pagination-white rounded-full" />
        </div>
      </div>
    </template>
  </Carousel>
</template>
<script setup>
const breakpoints = {
  300: {
    itemsToShow: 1,
    snapAlign: "start",
  },
  400: {
    itemsToShow: 1,
    snapAlign: "start",
  },
  600: {
    itemsToShow: 2,
    snapAlign: "start",
  },
  1202: {
    itemsToShow: 3,
    snapAlign: "start",
  },
  1310: {
    itemsToShow: 3,
    snapAlign: "start",
  },
};
</script>

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

export default {
  components: {
    CardNoodles,
    Carousel,
    Slide,
    Pagination,
    Navigation,
  },
  data() {
    return {
      noodles: [
        {
          image: "/images/noodle.png",
          title: "Kimchi Noodle with Mandu",
          description:
            "Our special kimchi soup noodle, combined with homemade Korean dumplings.",
          icons: ["/icon/icon1.svg", "/icon/icon2.svg", "/icon/icon3.svg"],
        },
        {
          image: "/images/noodle3.png",
          title: "Tangsuyuk Spicy Noodle",
          description: "Arirang extra hot noodle with sour and sweet chicken.",
          icons: ["/icon/icon1.svg", "/icon/icon2.svg", "/icon/icon3.svg"],
        },
        {
          image: "/images/noodle3.png",
          title: "Mild Bulgogi Noodle",
          description: "Arirang spicy bibim ramyeon with sweet sautéed beef.",
          icons: ["/icon/icon1.svg", "/icon/icon2.svg", "/icon/icon3.svg"],
        },
      ],
    };
  },
};
</script>

<style>
.card-slide-noodle {
  border-top-left-radius: 200%;
  border-top-right-radius: 200%;
  border-bottom-left-radius: 30%;
  border-bottom-right-radius: 30%;
  transition: all 0.3s ease-out;
  & .img-slide-noodle {
    margin-top: -80px;
    transition: all 0.3s ease-out;
  }
  &:hover {
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    border-bottom-left-radius: 10%;
    border-bottom-right-radius: 10%;
    padding-top: 20px;
    transform: scale(1.05);
    z-index: 1;
    transition: all 0.3s ease-out;
    margin-top: -80px;
    & .img-slide-noodle {
      border-radius: 50%;
      margin-top: 0;
      transition: all 0.3s ease-out;
    }
  }
}

.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;
  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>
