<template>
  <div class="team">
    <Container>
      <div class="entry">
        <div class="title flex justify-between w-full">
          <slot name="title" />
          <SwiperNavigation :splide="splide" />
        </div>
      </div>
    </Container>
    <div class="swiper-container">
      <Splide ref="splide" :options="options">
        <SplideSlide v-for="(member, index) in team" :key="index">
          <Member :member="member" />
        </SplideSlide>
      </Splide>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, Ref, ref } from 'vue';
import Swiper from './Swiper.vue';
import Container from '@/components/ui/Container.vue';
import { ITeamSwiper } from '@/components/sections/Team/Team.types';
import Member from '@/components/sections/Team/Member/Member.vue';
import arrowIcon from '@/assets/img/static-icons/arrow/arrow-right-orange.svg?url';

import { Splide, SplideSlide } from '@splidejs/vue-splide';
import { Options, Splide as SplideInterface } from '@splidejs/splide';
import SwiperNavigation from '@/components/ui/SwiperNavigation.vue';

export default defineComponent({
  components: { Member, Container, Swiper, Splide, SplideSlide, SwiperNavigation },

  props: {
    team: {
      type: Array as PropType<ITeamSwiper.Member[]>,
      required: true,
    },
  },

  setup() {
    const splide = ref() as Ref<SplideInterface>;
    return { splide };
  },
  data: () => ({
    formIsOpened: false,
    arrowIcon,
    options: {
      type: 'slide',
      easing: 'ease-out',
      speed: 230,
      arrows: false,
      pagination: false,
      autoWidth: true,
      gap: 32,
      perPage: 1,
      perMove: 1,
      breakpoints: {
        500: {
          perPage: 2,
        },
        0: {
          perPage: 1.05,
        },
      },
    } as Options,
  }),
});
</script>

<style lang="scss">
.team {
  position: relative;

  margin-bottom: 160px;
}

.swiper-container {
  position: relative;

  width: 100%;
  max-width: 1312px;
  height: 100%;
  margin: 0 auto 60px auto;
  overflow: visible;
}

.entry {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1115px;
  margin: 0 auto 60px auto;

  column-gap: 30px;
}

.title {
  color: #292929;
  font-weight: bold;
  font-size: 48px;
}

.description {
  max-width: 569px;

  color: #383838;
  font-size: 18px;
  line-height: 168%;
}

.info {
  &-desktop {
    margin-top: 5px;
  }

  &-mobile {
    display: none;
  }
}
</style>
