---
import TestimonialCard from '../../../components/testimonial-card/testimonial-card.astro';
import { testimonials } from '../../../data';
import type { Testimonial } from '../../../types';

type Props = {
  className: string;
};

const { className = '' }: Props = Astro.props;
---

<section class={`${className}`} id="testimonials">
  <div class="w-lg-50 mb-5 mb-md-9">
    <h2 class="h1 text-white">Nuestros estudiantes hablan de nosotros</h2>
  </div>

  <div class="swiper testimonials-swiper">
    <div class="swiper-wrapper">
      {testimonials &&
        testimonials.map((testimonial: Testimonial) => (
          <div class="swiper-slide">
            <TestimonialCard
              description={testimonial.description}
              image={testimonial.image}
              role={testimonial.role}
              name={testimonial.name}
            />
          </div>
        ))}
    </div>
    <div class="testimonial-next swiper-button-next"></div>
    <div class="testimonial-prev swiper-button-prev"></div>
  </div>
</section>

