<script lang="ts">
  // import PaginationEl from '../../../components/pagination/Pagination.svelte';

  import { onMount } from 'svelte';
  import Swiper from 'swiper';
  import 'swiper/css';
  import 'swiper/css/pagination';
  import { Pagination, Autoplay } from 'swiper/modules';
  import CardUser from '../../card/CardUser.svelte';

  export let sliderName: string;
  export let title: string;
  export let users: { [name: string]: string }[];

  onMount(() => {
    const container: HTMLElement | null = document.querySelector(`.${sliderName}__swiper`);
    // const pagination: HTMLElement | null = document.querySelector(`.${sliderName}__pagination`);

    // if (!container || !pagination) return;
    if (!container) return;

    new Swiper(container, {
      modules: [Pagination, Autoplay],
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      spaceBetween: 40,
      // pagination: {
      // 	el: pagination,
      // 	clickable: true
      // },
      breakpoints: {
        320: {
          slidesPerView: 1.5,
          spaceBetween: 20,
        },
        480: {
          slidesPerView: 2.5,
          spaceBetween: 20,
        },
        768: {
          slidesPerView: users.length,
          spaceBetween: sliderName !== 'management' ? 0 : 20,
          width: sliderName !== 'management' ? 1280 : null,
        },
        1366: {
          slidesPerView: users.length,
          spaceBetween: sliderName !== 'management' ? 0 : 32,
          width: sliderName !== 'management' ? 1280 : null,
        },
        1800: {
          slidesPerView: users.length,
          spaceBetween: sliderName !== 'management' ? 0 : 40,
          width: sliderName !== 'management' ? 1600 : null,
        },
      },
    });
  });
</script>

<div class="block-team">
  <div class="container">
    <p class="block-team__title">{title}</p>
    <div class="block-team__slider">
      <div class="swiper block-team__swiper {sliderName}__swiper">
        <div class="swiper-wrapper {sliderName !== 'management' && 'block-team__developement' }">
          {#each users as user}
            <div class="swiper-slide">
              <CardUser image={user.image} name={user.name} post={user.post} />
            </div>
          {/each}
        </div>
      </div>
      <!--			<PaginationEl className="block-team__pagination {sliderName}__pagination" />-->
    </div>
  </div>
</div>

<style lang="scss">
  @import 'src/scss/media';
  @import 'src/scss/mixins';
  @import 'src/scss/variables';

  .block-team {
    margin-bottom: 100px;

    @include breakpoint-down('deskL') {
      margin-bottom: 80px;
    }

    @include breakpoint-down('tabM') {
      margin-bottom: 114px;
    }
    &__developement{
      justify-content: center;
      flex-wrap: wrap;
      gap: 25px 40px;
      
      @include breakpoint-down('deskL') {
        margin-bottom: 40px;
        gap: 25px 32px;
      }
      @include breakpoint-down('deskS') {
        margin-bottom: 40px;
        gap: 25px 32px;
      }
      @include breakpoint-down('tabL') {
        justify-content: center;
      }
      @include breakpoint-down('tabM') {
        justify-content: start;
        flex-wrap: nowrap;
        gap: 0;
      }
    }
    &__title {
      @include titleL;

      text-align: center;
      margin-bottom: 64px;

      @include breakpoint-down('deskL') {
        margin-bottom: 40px;
      }
    }

    &__slider {
      max-width: 1051px;
      margin-inline: auto;

      @include breakpoint-down('deskL') {
        max-width: 832px;
      }
    }

    &__swiper {
      @include breakpoint-down('tabM') {
        margin-left: -20px;
        width: calc(100% + 40px);
        padding: 0 20px;
      }
    }

    &:last-of-type {
      margin-bottom: 0;
    }
  }
</style>