<script setup lang="ts">
import { useGlobalTestimonialsQuery } from "~/queries/testimonials";

const testimonalsQuery = useGlobalTestimonialsQuery();
const testimonials = computed(() => testimonalsQuery.data.value || []);
</script>
<template>
  <section id="testimonials" class="bg-gradient-odd py-section">
    <div class="container mx-auto px-4">
      <div class="flex justify-center pb-11">
        <SvgDiamondShapeIcon />
      </div>
      <SectionHeadline
        :title="$t('testimonialsSection.title')"
        class="md:mx-auto md:w-[594px]"
      />
      <p class="pb-[3.5rem] text-center">
        {{ $t("testimonialsSection.description") }}
      </p>
      <HorizontalCarouselWithControls
        v-if="testimonalsQuery.data.value"
        :testimonials="testimonials"
      />
    </div>
  </section>
</template>
