import type { Temoignage } from "@/types/temoignage";
import styles from "./Temoignages.module.css";

export default function Temoignages({ temoignages }: { temoignages: Temoignage[] }) {
  if (temoignages.length === 0) return null;

  // Dupliqué pour un défilement infini sans coupure (voir CSS : la piste
  // translate de -50%, soit exactement la largeur du premier jeu de cartes).
  const temoignagesDefile = [...temoignages, ...temoignages];

  return (
    <section className={styles.section}>
      <div className={styles.inner}>
        <h2 className={styles.titre}>Ils utilisent déjà Pubago</h2>
      </div>

      <div className={styles.fenetre}>
        <div className={styles.piste}>
          {temoignagesDefile.map((temoignage, index) => (
            <blockquote key={`${temoignage.id}-${index}`} className={styles.carte}>
              <p className={styles.texte}>&laquo; {temoignage.contenu} &raquo;</p>
              <footer className={styles.auteur}>
                <strong>{temoignage.auteur}</strong>
                {temoignage.entreprise && <span>{temoignage.entreprise}</span>}
              </footer>
            </blockquote>
          ))}
        </div>
      </div>
    </section>
  );
}