@props([
    'texte' => '',
    'audio' => null,
    'etendu' => false,
])
{{--
    Le bouton d'écoute (v2.0 §3).

    « La voix est disponible partout, jamais imposée. » Le texte reste visible à côté :
    qui lit, lit ; qui n'y arrive pas, écoute.

    Deux sources, dans cet ordre : le fichier audio enregistré en darija par la société quand il
    existe, la synthèse vocale du téléphone sinon. La seconde n'est pas de la darija — c'est
    un pis-aller assumé en attendant que les audios soient enregistrés, et il vaut mieux que
    le silence.
--}}
@php
    $texteLu = trim(strip_tags((string) $texte));
    $langue = app()->getLocale() === 'ar' ? 'ar-MA' : 'fr-FR';
@endphp

@if ($texteLu !== '' || $audio)
    <button type="button"
            data-ecouter
            data-texte="{{ $texteLu }}"
            data-langue="{{ $langue }}"
            @if ($audio) data-audio="{{ $audio }}" @endif
            aria-pressed="false"
            {{ $attributes->class([
                'cible-tactile inline-flex items-center justify-center gap-2 rounded-2xl border-2 border-primaire/40 bg-primaire/10 font-bold text-primaire',
                'px-4' => $etendu,
                'w-12' => ! $etendu,
            ]) }}>
        <svg class="h-6 w-6 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
            <path d="M11 5L6 9H3v6h3l5 4V5z" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M15.5 8.5a5 5 0 010 7M18.5 5.5a9 9 0 010 13" stroke-linecap="round"/>
        </svg>
        @if ($etendu)
            <span>{{ __('formation.ecouter') }}</span>
        @else
            <span class="sr-only">{{ __('formation.ecouter') }}</span>
        @endif
    </button>
@endif