<template>
  <div class="c-review-slider">

    <div class="c-review-slider__swiper">
      <swiper
          :slides-per-view="1"
          :space-between="24"
          :breakpoints="{
            768: {
              slidesPerView: 2,
              spaceBetween: 24,
            },
            1200: {
              slidesPerView: 3,
              spaceBetween: 24,
            }
          }"
          :autoplay="{
          delay: 5000,
          disableOnInteraction: false,
        }"
          :modules="[]"

      >
        <div class="o-review-slider__controls-row">
          <a class="o-review-slider__link" href="/referenties">Meer referenties bekijken</a>
          <reviews-swiper-controls />
        </div>
        <div class="swiper-wrapper">
          <swiper-slide v-for="review in props.reviews">
            <div class="c-review">
              <div class="c-review__heading  u-spacing-mb2">
                <div class="c-review__naming">
                  <div class="c-review__author">{{review.authorName}}</div>

                  <div class="c-review__location">
                    bij {{review.location}}
                  </div>
                  <div class="c-review__location">
                    op {{review.date}}
                  </div>

                </div>
                <div class="c-review__rating">
              <span class="c-rating__score">
                <span class="c-rating__points">{{review.rating}}</span>
                <span class="c-rating__max">/ 10</span>
              </span>

                  <div class="c-rating__stars">
                    <stars :rating="review.rating / 2"></stars>
                  </div>

                </div>
              </div>
              <div class="c-review__headline"><strong>{{review.headline}}</strong></div>
              <div class="c-review__text  u-spacing-mt1">{{review.text}}</div>
            </div>
          </swiper-slide>
        </div>
      </swiper>
    </div>
  </div>
</template>

<script setup>
import {Swiper, SwiperSlide} from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/autoplay'
import Stars from "./Stars.vue";
import ReviewsSwiperControls from "./ReviewsSwiperControls.vue";

const props = defineProps({
  reviews: {type: Array, required: true}
});
</script>