'use client';

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

import type {Son} from '@/services/mediaAnnuaireService';

import './SonsSection.css';

interface SonsSectionProps {
  sons: Son[] | undefined;
}

/** Bloc « Sons » d'une fiche : un lecteur par son déposé via l'Extranet, avec son titre. */
export default function SonsSection({sons}: SonsSectionProps) {
  const t = useTranslations('Common');
  const ecoutables = (sons ?? []).filter(son => Boolean(son.url));

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

  return (
    <div className="tk-section-card" data-testid="sons-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-green">
            <FaMusic />
          </span>
          {t('sons_title')}
        </h2>
      </div>
      <div className="tk-section-card-body">
        <ul className="tk-sons">
          {ecoutables.map((son, index) => (
            <li key={son.asoId} className="tk-son">
              <span className="tk-son-titre">{son.titre?.trim() || `${t('son_sans_titre')} ${index + 1}`}</span>
              <audio controls preload="none" src={son.url ?? undefined} className="tk-son-player" />
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}