<template>
  <Carousel class="carousel" v-bind:breakpoints="breakpoints" :items-to-show="1" :wrap-around="false">
    <Slide v-for="product in products" :key="product.name">
      <div class="carousel-item">
        <ProductBox :product="product"></ProductBox>
      </div>
    </Slide>

    <template #addons>
      <Navigation />
    </template>
  </Carousel>
</template>

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

export default {
  props: {
    products: Array
  },
  data: () => ({
    // breakpoints are mobile first
    // any settings not specified will fallback to the carousel settings
    breakpoints: {
     
      // 1024 and up
      920: {
        itemsToShow: 2,
        snapAlign: 'start',
        wrapAround: false,
      },
    },
  }),
  components: {
    Carousel,
    Slide,
    Pagination,
    Navigation,
    ProductBox,
  },
}
</script>

<style lang="scss">
  
  .carousel {
    margin-top: 32px;
    &-item {
      height: 450px;
      width: 330px;
      font-size: 20px;
    }

    &__slide {
      padding: 10px;
    }
    &__pagination-button:hover::after, &__pagination-button--active::after {
      background: rgba(255,255,255, 0.6);
    }

    &__pagination-button {
      &::after{    
        background: rgba(255,255,255, 0.3);
      }

      &--active::after {
        background: rgba(255,255,255, 0.6);
        &:hover {
          background: rgba(255,255,255, 0.6);
        }
      }
    }

    &__prev,
    &__next {
      box-sizing: content-box;
      background : rgba(255,255,255, 0.3);
      border-radius: 50px;
      border: none;
      color: #333;

      &:hover {
        background : rgba(255,255,255, 0.8);
      }
    }
  }
</style>