'use client';

import Link from 'next/link';
import {useTranslations} from 'next-intl';
import {FaUsers} from 'react-icons/fa';

import './AnimateursGallery.css';
import {artisteHref} from '@/utils/artisteHref';

export interface AnimateurAvecPhoto {
  aenId: number;
  aenLibelle: string;
  photoUrl: string | null;
  /** Cible du lien ; à défaut, la fiche artiste de l'entrée. */
  href?: string;
}

interface AnimateursGalleryProps {
  animateurs: AnimateurAvecPhoto[] | undefined;
  locale: string;
  /** Clé Common du titre du bloc ; « Les animateurs » par défaut. */
  titleKey?: string;
}

/** Galerie des animateurs du stage : photo (média principal de leur fiche) et lien vers leur page. */
export default function AnimateursGallery({animateurs, locale, titleKey = 'animateurs_title'}: AnimateursGalleryProps) {
  const t = useTranslations('Common');

  if (!animateurs || animateurs.length === 0) return null;

  return (
    <div className="tk-section-card" data-testid="animateurs-gallery">
      <div className="tk-section-card-header">
        <h2 className="tk-section-card-title">
          <span className="tk-section-card-title-icon tk-section-card-title-icon-green">
            <FaUsers />
          </span>
          {t(titleKey)}
        </h2>
      </div>
      <div className="tk-section-card-body">
        <ul className="tk-animateurs-gallery">
          {animateurs.map(animateur => (
            <li key={animateur.aenId} className="tk-animateur-card">
              <Link href={animateur.href ?? artisteHref(locale, animateur.aenId, animateur.aenLibelle)} className="tk-animateur-card-link">
                {animateur.photoUrl ? (
                  <img src={animateur.photoUrl} alt={animateur.aenLibelle} className="tk-animateur-card-photo" />
                ) : (
                  <span className="tk-animateur-card-photo tk-animateur-card-initiale" aria-hidden="true">
                    {animateur.aenLibelle.charAt(0).toUpperCase()}
                  </span>
                )}
                <span className="tk-animateur-card-nom">{animateur.aenLibelle}</span>
              </Link>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}