@props([
    'alertas' => collect(),
])

@php
    $alertas = $alertas ?? collect();
    $temRotacao = $alertas->count() > 1;
@endphp

<article @class([
    'ma-features__card',
    'ma-features__card--alertas',
    'ma-features__card--alertas-rotativo' => $temRotacao,
]) id="ma-feature-alertas" @if ($temRotacao) data-ma-alertas-rotate @endif>
    <span @class([
        'ma-features__icon',
        'ma-features__icon--green',
        'ma-features__icon--pulse' => $alertas->isNotEmpty(),
    ]) aria-hidden="true">
        <i class="fa-solid fa-bell"></i>
    </span>

    <h3 class="ma-features__title">{{ __('Alertas em tempo real') }}</h3>

    <div class="ma-features__alertas-body" aria-live="polite" aria-atomic="true">
        @if ($alertas->isNotEmpty())
            <div class="ma-features__alertas-rotator">
                @foreach ($alertas as $index => $alerta)
                        @php
                            $mensagemCard = $alerta->mensagem_resumida_exibicao;
                            $textoRotacao = trim($alerta->titulo_resumido . ' ' . $mensagemCard);
                            $duracaoMs = min(8000, max(6000, mb_strlen($textoRotacao) * 70));
                        @endphp
                    <div @class([
                        'ma-features__alerta-slide',
                        'is-active' => $index === 0,
                    ])
                        data-ma-alerta-slide
                        data-duration="{{ $duracaoMs }}"
                        @if ($index !== 0) aria-hidden="true" @endif>
                        <span @class(['ma-alerts__tag', 'ma-features__alerta-tag', $alerta->categoria->tagClass()])>
                            {{ $alerta->categoria->label() }}
                        </span>
                        <p class="ma-features__alerta-title" title="{{ $alerta->titulo }}">
                            {{ $alerta->titulo_resumido }}
                        </p>
                        @if ($mensagemCard)
                            <p class="ma-features__alerta-message">{{ $mensagemCard }}</p>
                        @endif
                        <time class="ma-features__alerta-date"
                            datetime="{{ $alerta->publicado_em?->toIso8601String() }}">
                            {{ $alerta->data_formatada }}
                        </time>
                    </div>
                @endforeach
            </div>
        @else
            <p class="ma-features__text">
                {{ __('Fique por dentro de alterações de rotas, horários e obras.') }}
            </p>
        @endif
    </div>

    @if ($temRotacao)
        <div class="ma-features__alerta-progress" aria-hidden="true">
            <span class="ma-features__alerta-progress-bar" data-ma-alerta-progress></span>
        </div>
    @endif

    <a href="{{ route('mobiangra.alertas') }}" class="ma-features__link">
        {{ __('Ver alertas') }}
        <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
    </a>
</article>