'use client';
import React, {useEffect, useState} from 'react';
import Link from 'next/link';
import {useTranslations} from 'next-intl';
import {getSoutiens, type Soutien} from '@/services/soutienService';

interface SoutiensLogosProps {
  locale: string;
}

/** Logos des soutiens cochés « pied de page » en Kasour (spec L11), cliquables vers leur site. */
export default function SoutiensLogos({locale}: SoutiensLogosProps) {
  const t = useTranslations('HomePage');
  const [soutiens, setSoutiens] = useState<Soutien[]>([]);

  useEffect(() => {
    getSoutiens(true).then(setSoutiens).catch(() => setSoutiens([]));
  }, []);

  if (soutiens.length === 0) return null;

  return (
    <section className="footerv2__soutiens" data-testid="footer-soutiens" aria-label={t('footer_soutiens_title')}>
      <h4 className="footerv2__heading footerv2__heading--green">{t('footer_soutiens_title')}</h4>
      <ul className="footerv2__soutiens-list">
        {soutiens.map((soutien) => (
          <li key={soutien.souId}>
            <a
              href={soutien.souUrl || `/${locale}/soutiens`}
              className="footerv2__soutien"
              target={soutien.souUrl ? '_blank' : undefined}
              rel={soutien.souUrl ? 'noopener noreferrer' : undefined}
              title={soutien.souNom}
            >
              {soutien.logoUrl ? (
                <img src={soutien.logoUrl} alt={soutien.souNom} loading="lazy" />
              ) : (
                <span className="footerv2__soutien-nom">{soutien.souNom}</span>
              )}
            </a>
          </li>
        ))}
      </ul>
      <Link href={`/${locale}/soutiens`} className="footerv2__link">{t('footer_soutiens_all')}</Link>
    </section>
  );
}