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

<script>
export default {
  props: {
    image: String,
    title: String,
    description: String,
    icons: Array,
  },
};
</script>

<style scoped>
.card-noodle {
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
  transition: all 1s;
  & .img-noodle {
    margin-top: -80px;
    transition: all 1s;
  }
  &:hover {
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    transform: scale(1.05);
    z-index: 1;
    transition: all 1s;
    margin-top: -80px;
    & .img-noodle {
      border-radius: 50%;
      margin-top: 0;
      transition: all 1s;
    }
  }
}

.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: 80px;
  height: 80px;
  margin-left: -70px;

  svg {
    color: #b49948;
  }
}

.carousel__next {
  width: 80px;
  height: 80px;
  margin-right: -70px;
  svg {
    color: #b49948;
  }
}

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

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

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