<script lang="ts">
  import { onMount } from 'svelte';
  import Swiper from 'swiper';
  import 'swiper/css';
  import 'swiper/css/grid';
  import 'swiper/css/pagination';
  import { Grid, Pagination } from 'swiper/modules';

  import PaginationEl from '../../pagination/Pagination.svelte';

  import img1 from '../../../assets/logos/iq-option.svg';
  import img2 from '../../../assets/logos/quadcode-markets.svg';
  import img3 from '../../../assets/logos/qcex.svg';
  import { t } from '$lib/translations';

  onMount(() => {
    const container: HTMLElement | null = document.querySelector('.block-trusted__swiper');
    const pagination: HTMLElement | null = document.querySelector('.block-trusted__pagination');

    if (!container || !pagination) return;

    new Swiper(container, {
      modules: [Pagination, Grid],
      spaceBetween: 40,
      pagination: {
        el: pagination,
        clickable: true,
      },
      breakpoints: {
        320: {
          slidesPerView: 1,
          spaceBetween: 15,
          centeredSlides: true,
        },
        480: {
          slidesPerView: 2,
          spaceBetween: 15,
        },
        768: {
          slidesPerView: 3,
          spaceBetween: 20,
          grid: {
            rows: 1,
            fill: 'row',
          },
        },
        1366: {
          slidesPerView: 3,
          grid: {
            rows: 1,
            fill: 'row',
          },
        },
        1800: {
          slidesPerView: 3,
          grid: {
            rows: 1,
            fill: 'row',
          },
        },
      },
    });
  });
</script>

<div class="block-trusted">
  <div class="container">
    <div class="block-trusted__wrapper">
      <p class="block-trusted__title">{$t('white-label-broker.Trusted by brokers & exchanges all over the world')}</p>
      <div class="swiper block-trusted__swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="block-trusted__item">
              <img src={img1} alt="" loading="lazy" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="block-trusted__item">
              <img src={img2} alt="" loading="lazy" />
            </div>
          </div>
          <div class="swiper-slide">
            <div class="block-trusted__item">
              <img src={img3} alt="" loading="lazy" />
            </div>
          </div>
        </div>
      </div>
      <PaginationEl className="block-trusted__pagination" />
    </div>
  </div>
</div>

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

  .block-trusted {
    padding: 151px 0;

    @include breakpoint-down('deskL') {
      padding: 85px 0;
    }

    @include breakpoint-down('deskS') {
      padding: 78px 0 70px;
    }

    @include breakpoint-down('tabM') {
      padding: 95px 0;
    }

    &__wrapper {
      width: 100%;
    }

    &__title {
      @include titleL;

      width: 100%;
      max-width: 750px;
      text-align: center;
      margin-inline: auto;
      margin-bottom: 64px;

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

    &__swiper {
      @include breakpoint-down('deskS') {
        margin-bottom: 64px;
      }

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

    &__item {
      width: 100%;
      height: 53px;
      display: flex;
      align-items: center;
      justify-content: center;

      > img {
        width: auto;
      }
    }

    & :global(.block-trusted__pagination) {
      display: none;

      @include breakpoint-down('deskS') {
        display: flex;
      }
    }
  }
</style>