import React from 'react';
import './TestimonialSection.css';

const TestimonialSection = ({ testimonials = [
  {
    id: 1,
    text: '"Avec le changement d\'outils on appréhendait un peu, mais ils ont été là pendant toute la phase de demarrage. On pouvait les appeler à tout moment. Ca change :) :) Merci Elyos"',
    author: 'Vincent M.',
    role: 'Responsable Formation',
    avatar: '/img/no_body_homme.png',
    rating: 4.5
  },
  {
    id: 2,
    text: '"L\'équipe m\'a accompagner dans la prise en main de l\'outil et franchement ça change. J\'avais un contact dédié que je pouvais appeler à tout moment les premiers mois. Vraiment Top !!!"',
    author: 'Djamila E.',
    role: 'Responsable Formation',
    avatar: '/img/jamila_e.png',
    rating: 5
  },
  {
    id: 3,
    text: '"ELYOS a transformé notre façon de travailler ! La connexion du CRM avec la gestion administrative permet qu’après signature électronique de nos conventions et devis que les sessions de formation se créent automatiquement,..."',
    author: 'Valerie C.',
    role: 'Gestionnaire de Formation',
    avatar: '/img/valerie_c.png',
    rating: 5
  },
  {
    id: 4,
    text: '"Avec l\'AUTOMATISATION La checklist Qualiopi, Je ne me prends plus la tête à savoir où j\'en suis, le reste à faire etc... Je me concentre désormais sur mes clients et mes apprenants..."',
    author: 'Aline L.',
    role: 'Responsable Organisme Formation',
    avatar: '/img/no_body_femme.png',
    rating: 4.5
  },

  {
    id: 5,
    text: '"C\’est un outil facilitant, aidant pour le quotidien d\'un organisme de formation. les équipes sont à l\'écoute pour les évolutions."',
    author: 'Thibault P.',
    role: 'Directeur Organisme Formation',
    avatar: '/img/thibault_p.png',
    rating: 5
  },

]}) => {
  const renderStars = (rating) => {
    const stars = [];
    for (let i = 0; i < 5; i++) {
      stars.push(
        <img 
          key={i}
          src="/img/testimony_star.png"
          alt="star"
          className="star-icon"
        />
      );
    }
    return stars;
  };

  return (
    <section className="testimonial-section">
      <div className="title-container">
        <span className="subtitle">AVIS CLIENTS</span>
        <h2 className="title">Ils nous font confiance.</h2>
      </div>

      <div className="testimonials-container">
        {testimonials.map((testimonial) => (
          <div key={testimonial.id} className="testimonial-card">
            <div className="testimonial-content">
              <div className="stars-container">
                {renderStars(testimonial.rating)}
              </div>
              <p className="testimonial-text">{testimonial.text}</p>
            </div>
            <div className="client-info">
              <img 
                src={testimonial.avatar} 
                alt={testimonial.author}
                className="client-avatar"
              />
              <div className="client-details">
                <span className="client-name">{testimonial.author}</span>
                <span className="client-role">{testimonial.role}</span>
              </div>
            </div>
          </div>
        ))}
      </div>

      <div className="slider-controls">
        <button className="arrow-button">
          <img src="/img/testimony_arrow1.png" alt="Previous" />
        </button>
        <div className="slider-bullets">
          <img src="/img/testimony_bullet.png" alt="Slider position" />
        </div>
        <button className="arrow-button">
          <img src="/img/testimony_arrow2.png" alt="Next" />
        </button>
      </div>
    </section>
  );
};

export default TestimonialSection;

