'use client';

import {useTranslations} from 'next-intl';
import {FaFileDownload} from 'react-icons/fa';

import type {Fichier} from '@/services/entityFilesService';

interface FichiersSectionProps {
  fichiers: Fichier[] | undefined;
}

/** Bloc « Fichiers » d'une fiche : un lien de téléchargement par fichier, portant son nom. */
export default function FichiersSection({fichiers}: FichiersSectionProps) {
  const t = useTranslations('Common');
  const telechargeables = (fichiers ?? []).filter(fichier => Boolean(fichier.url));

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

  return (
    <div className="tk-section-card" data-testid="fichiers-section">
      <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">
            <FaFileDownload />
          </span>
          {t('fichiers_title')}
        </h2>
      </div>
      <div className="tk-section-card-body">
        <ul className="list-unstyled mb-0 d-flex flex-column gap-2">
          {telechargeables.map(fichier => (
            <li key={fichier.medId}>
              <a href={fichier.url ?? undefined} target="_blank" rel="noopener noreferrer" download>
                {fichier.label?.trim() || fichier.filename || fichier.url}
              </a>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}