'use client';
import React from 'react';
import Link from 'next/link';
import {useTranslations} from 'next-intl';
import {FaImages} from 'react-icons/fa';
import CarouselAfficheEnsembleEvenement from './CarouselAfficheEnsembleEvenementClient';
import type {EnsembleEvenementEdition} from '@/services/ensembleEvenementService';
import {ensembleEvenementHref} from '@/utils/ensembleEvenementHref';
import './editions.css';

interface EditionsEnsembleProps {
  editions: EnsembleEvenementEdition[] | undefined;
  locale: string;
  /** Clé EnsembleEvenementsDetailsPage du titre : « Les autres éditions » (contenants) ou « Parcourir les éditions » (enfants). */
  titleKey: 'title_parents' | 'title_children';
}

/**
 * Éditions liées à un ensemble d'événements (spec L252, L256) : logos cliquables, en carrousel
 * quand elles sont nombreuses, en grille sinon.
 */
export default function EditionsEnsemble({editions, locale, titleKey}: EditionsEnsembleProps) {
  const t = useTranslations('EnsembleEvenementsDetailsPage');
  if (!editions || editions.length === 0) return null;

  return (
    <div className="tk-section-card" data-testid={`editions-${titleKey}`}>
      <div className="tk-section-card-header">
        <h2 className="tk-section-card-title">
          <span className="tk-section-card-title-icon tk-section-card-title-icon-blue">
            <FaImages />
          </span>
          {t(titleKey)}
        </h2>
      </div>
      <div className="tk-section-card-body">
        {editions.length > 4 ? (
          <CarouselAfficheEnsembleEvenement data={editions} locale={locale} />
        ) : (
          <ul className="tk-editions-grid">
            {editions.map((edition) => (
              <li key={edition.eesId}>
                <Link href={ensembleEvenementHref(locale, edition.eesId, edition.eesLibelle)} className="tk-edition-card">
                  {edition.logoUrl ? (
                    <img src={edition.logoUrl} alt={edition.eesLibelle} className="tk-edition-card__logo" loading="lazy" />
                  ) : (
                    <span className="tk-edition-card__placeholder" aria-hidden="true"><FaImages /></span>
                  )}
                  <h3 className="tk-edition-card__nom">{edition.eesLibelle}</h3>
                  {edition.nbEvent !== undefined && <span className="tk-edition-card__nb">{t('edition_events', {count: edition.nbEvent})}</span>}
                </Link>
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}