'use client';
import React from 'react';
import Link from 'next/link';
import {useTranslations} from 'next-intl';
import {FaSitemap} from 'react-icons/fa';
import './FederationsLogos.css';

export interface FederationAvecLogo {
  fedId: number;
  fedLibelle: string | null;
  logoUrl: string | null;
}

interface FederationsLogosProps {
  federations: FederationAvecLogo[];
  locale: string;
}

/** Fédérations dont l'entrée est membre (spec L126) : logo cliquable vers la fiche de la fédération, nom à défaut. */
export default function FederationsLogos({federations, locale}: FederationsLogosProps) {
  const t = useTranslations('Common');
  if (federations.length === 0) return null;

  return (
    <div className="tk-federations" data-testid="federations-logos">
      <h2 className="tk-federations__title">
        <FaSitemap aria-hidden="true" /> {t('federations_title')}
      </h2>
      <ul className="tk-federations__liste">
        {federations.map((federation) => {
          const nom = federation.fedLibelle ?? `#${federation.fedId}`;
          return (
            <li key={federation.fedId}>
              <Link href={`/${locale}/federations/${federation.fedId}`} className="tk-federations__lien" title={nom}>
                {federation.logoUrl ? (
                  <img src={federation.logoUrl} alt={nom} className="tk-federations__logo" loading="lazy" />
                ) : (
                  <span className="tk-federations__nom">{nom}</span>
                )}
              </Link>
            </li>
          );
        })}
      </ul>
    </div>
  );
}