<template>
  <div class="tag">
    <h2 class="tag__title">{{ tag.name }}</h2>
    <div class="tag__block">
      <div class="tag__block-inner">
        <swiper
          class="swiper"
          :effect="'cards'"
          :grabCursor="true"
          :modules="[EffectCards, Mousewheel]"
          :cardsEffect="{
            slideShadows: false
          }"
          :mousewheel="true"
        >
          <swiper-slide
              class="swiper__slide"
              v-for="product in tag.productSet.edges"
              :key="product.node.uuid"
          >
            <product-card
              :product="product.node"
            />
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { EffectCards, Mousewheel } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/scrollbar';
import ProductCard from "@/components/cards/product-card.vue";

const props = defineProps({
  tag: Object
})

const swiperOptions = {
  speed: 500,
  spaceBetween: 30,
  slidesPerView: 3,
  scrollbar: {
    hide: true,
  }
}
</script>

<style lang="scss" scoped>
.tag {
  width: 500px;

  &__title {
    margin-bottom: 10px;
    text-align: center;
    color: $accent;
    font-size: 56px;
    font-weight: 700;
  }

  &__block {
    border-radius: $default_border_radius;
    background-color: $accentLight;
    padding: 10px;

    &-inner {
      border-radius: $default_border_radius;
      border: 5px solid $white;
      padding-inline:20px;
    }
  }
}

.swiper {
  width: 100%;
  padding-block: 30px;

  &__slide {
    display: grid;
    place-items: center;

    & .card {
      &:after {
        content: '';
        position: absolute;
        z-index: 2;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.2);
        width: 100%;
        height: 100%;
        transition: 0.2s;
      }
    }
  }
}

:deep(.swiper-slide-active) {
  & .card:after {
    background-color: transparent;
    z-index: -1;
  }
}
</style>