<template>
  <section class="feedback-section">
    <UiHeading tag="H2" size="300" class="text-three mb-4 pl-16 pr-24">
      Что говорят читатели
    </UiHeading>

    <!-- Slider main container -->

    <div class="swiper feedback-swiper relative">
      <!-- If we need pagination -->

      <!-- Additional required wrapper -->
      <div class="swiper-wrapper">
        <!-- Slides -->
        <div
          v-for="(feedback, index) in feedbackData"
          :key="index"
          class="swiper-slide feedback-slide !w-[356px] !h-[325px]"
        >
          <div class="feedback-card !w-full !h-full">
            <UiParagraph size="250" class="card-text">{{ feedback.text }}</UiParagraph>
          </div>
        </div>
      </div>
    </div>
    <div class="flex items-center flex-col">
      <UiParagraph size="250" class="text-center mt-20">
        Твое мнение важно!<br />
        Если книга была полезной или вызвала эмоции, оставь отзыв.<br />
        Это поможет другим и вдохновит на новые главы. <br />
        Спасибо!
      </UiParagraph>
      <UiButton class="mt-10" variants="secondary">Написать отзыв</UiButton>
    </div>
  </section>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'  
import Swiper from 'swiper'
import { Pagination, Autoplay } from 'swiper/modules'
import UiHeading from '@/components/Typography/UiHeading.vue'
import UiParagraph from '@/components/Typography/UiParagraph.vue'
import feedbackData from './_data/feedback.data'

import 'swiper/css'
import 'swiper/css/pagination'
import UiButton from '@/components/UiButton/UiButton.vue'

onMounted(() => {
  new Swiper('.feedback-swiper', {
    modules: [Pagination, Autoplay],
    direction: 'horizontal',
    loop: true,
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
    },
    slidesPerView: 'auto',
    spaceBetween: 72,
    pagination: {
      el: '.swiper-pagination',
      clickable: false,
    },
  })
})
</script>

<style lang="css" scoped>
.feedback-section {
  overflow: hidden;
}

.feedback-swiper {
  width: 100%;
  height: auto;
  padding-bottom: 40px;
  position: relative;
}

.feedback-slide {
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.feedback-card {
  background-color: #1a1a1a;
  border-radius: 10px;
  padding: 20px;
  color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-title {
  margin-bottom: 10px;
}

.card-text {
  white-space: pre-line;
  margin-bottom: 10px;
}

.swiper-pagination {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  display: flex;
  justify-content: center;
}

.swiper-pagination-bullet {
  background-color: #fff;
  opacity: 0.4;
  margin: 0 4px;
}

.swiper-pagination-bullet-active {
  background-color: #fff;
  opacity: 1;
}
</style>
