<template>
  <div class="tag" v-if="tag.productSet.edges.length">
    <h2 class="tag__title">{{ tag.name }}</h2>
    <div class="tag__block">
      <div class="tag__block-inner">
        <swiper
          class="swiper"
          v-if="tag.productSet.edges.length > 1"
          :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"
          >
            <cards-product
                class="swiper__slide-card"
                :product="product.node"
            />
          </swiper-slide>
        </swiper>
        <div class="tag__inner" v-else>
          <cards-product
              v-for="product in tag.productSet.edges"
              :key="product.node.uuid"
              :product="product.node"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue';
import { EffectCards, Mousewheel } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/scrollbar';
import type {IProductTag} from "~/types";

const props = defineProps<{
  tag: IProductTag;
}>();
</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;
    }
  }

  &__inner {
    width: 100%;
    padding-block: 30px;
    display: grid;
    place-items: center;
  }
}

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

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

    & .card {
      width: 300px;

      &: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>