<template>
  <div class="featured">
    <Container class="swiper-container">
      <div class="flex justify-between content-center mb-64 mobile:mb-48">
        <h2
          class="headline max-w-xl text-48 accent-gray-1200 font-bold mobile:text-24 mobile:max-w-full">
          Assemble the best team to work on your behalf
        </h2>
        <SwiperNavigation :splide="splide" class="navigation" />
      </div>
      <div class="swiper">
        <Splide
          ref="splide"
          :options="splideOptions"
        >
          <SplideSlide
            v-for="(item, index) in items"
            :key="index"
            class="slide">
            <Card :item="item" />
          </SplideSlide>
        </Splide>
      </div>
    </Container>
  </div>
</template>


<script lang="ts">
import { Ref, ref, defineComponent } from 'vue';
import { Options, Splide as SplideInterface } from '@splidejs/splide';
import '@splidejs/splide/dist/css/splide-core.min.css';

import Container from '@/components/ui/Container.vue';
import SwiperNavigation from '@/components/ui/SwiperNavigation.vue';
import Card from '@/components/pages/index/Featured/Card.vue';

import { featured as items } from '@/components/pages/index/content';

const splideOptions = {
  type: 'swiper',
  easing: 'ease-out',
  speed: 520,
  arrows: false,
  pagination: false,
  perPage: 3,
  gap: 32,
  breakpoints: {
    1200: {
      perPage: 2,
    },
    900: {
      gap: 300,
      perPage: 1,
    },
    490: {
      gap: 100,
      perPage: 1,
    },
  },
} as Options;

export default defineComponent({
  components: {
    Container,
    SwiperNavigation,
    Card,
  },

  data: () => ({
    splideOptions,
    items,
  }),

  setup() {
    const splide = ref() as Ref<SplideInterface>;
    return {
      splide,
    }
  }
});
</script>
