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

  import { onMount } from 'svelte';
  import Swiper from 'swiper';
  import 'swiper/css';
  import 'swiper/css/pagination';
  import { Pagination } from 'swiper/modules';
  import type { IPost } from '../../../type/post';

  export let posts: IPost[] = [];

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

    if (!container || !pagination) return;

    new Swiper(container, {
      modules: [Pagination],
      spaceBetween: 40,
      pagination: {
        el: pagination,
        clickable: true,
      },
      breakpoints: {
        320: {
          slidesPerView: 1,
          spaceBetween: 20,
        },
        480: {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        768: {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        1366: {
          slidesPerView: 3,
          spaceBetween: 32,
        },
        1800: {
          slidesPerView: 3,
          spaceBetween: 40,
        },
      },
    });
  });
</script>

<div class="block-blog">
  <p class="block-blog__title">Check out <span>our blog</span></p>
  <div class="swiper block-blog__swiper">
    <div class="swiper-wrapper">
      {#each posts as post}
        <div class="swiper-slide">
          <Card className="block-blog__card" data={post} />
        </div>
      {/each}
    </div>
  </div>
  <PaginationEl className="block-blog__pagination" />
</div>

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

  .block-blog {
    padding: 110px 0 155px 0;
    background: $techBlue2;
    overflow: hidden;
    width: 100%;

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

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

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

    &__title {
      @include titleXL;

      margin-bottom: 80px;
      margin-inline: auto;
      width: max-content;

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

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

      > span {
        color: $redPrimary;
      }
    }

    &__swiper {
      width: 100%;
      max-width: 1800px;
      padding: 0 200px;
      overflow: unset;

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

      @include breakpoint-down('deskS') {
        padding: 0 40px;
        margin-bottom: 43px;
      }

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

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

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