<template>
  <v-sheet>
    <v-card-title class="text-center">
      <h4 class="text-primary text-h6">Documents</h4>
    </v-card-title>
    <v-card-title class="text-center">
      <h3 class="text-h4">Quality Certificates</h3>
    </v-card-title>

    <v-sheet>
      <v-sheet class="d-flex justify-end pa-5">
        <v-btn icon="mdi-chevron-left" @click="slidePrev"></v-btn>
        <v-btn
          class="ml-5 bg-primary"
          icon="mdi-chevron-right"
          @click="slideNext"
        ></v-btn>
      </v-sheet>
      <swiper-container
        ref="swiperRef"
        class="d-flex justify-space-between"
        :slides-per-view="3"
        mousewheel-force-to-axis="true"
        autoplay-delay="4000"
        space-between="50"
        autoplay-disable-on-interaction="false"
        navigation="false"
      >
        <swiper-slide
          style="cursor: pointer; z-index: 2"
          v-for="n in 4"
          :key="n"
        >
          <certificateCard></certificateCard>
        </swiper-slide>
      </swiper-container>
    </v-sheet>
  </v-sheet>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useDisplay } from "vuetify";
import "swiper/css";
import "swiper/css/navigation";
import { register } from "swiper/element/bundle";
import certificateCard from "./certificateCard.vue";

register();

const { smAndUp } = useDisplay();
const swiperRef = ref(null);

const slideNext = () => {
  swiperRef.value.swiper.slideNext();
};

const slidePrev = () => {
  swiperRef.value.swiper.slidePrev();
};

onMounted(() => {
  if (swiperRef.value) {
    const params = {
      modules: [swiperRef.value.swiper.Navigation],
      navigation: false,
    };
    Object.assign(swiperRef.value, params);
    swiperRef.value.initialize();
  }
});
</script>

<style scoped></style>
