@props([
    // Lo que ha encontrado `RevisionDeCodigo::revisar()`.
    'avisos' => [],
])

{{--
    Lo que la revisión ha encontrado en un archivo SCSS o JS.

    **Los errores y los avisos se pintan distinto porque no son lo mismo.** Un desbalance es
    un archivo que no va a compilar —y un SCSS que no compila deja al cliente sin *nada* de
    ese producto, no solo sin la regla mal escrita—, así que frena el guardado. Un `@import`
    que apunta a un archivo que todavía no está puede ser justo eso, un archivo que se sube
    después: se dice y se deja pasar.

    Cada línea lleva su número. «Falta una llave» sin decir dónde, en un archivo de
    doscientas líneas, no es una ayuda: es un encargo.
--}}
@php
    $errores = array_values(array_filter($avisos, fn ($a) => $a['tipo'] === 'error'));
    $soloAvisos = array_values(array_filter($avisos, fn ($a) => $a['tipo'] !== 'error'));
@endphp

@if ($errores !== [])
    <div class="mt-2 rounded-lg border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-800">
        <p class="font-semibold">
            {{ count($errores) === 1
                ? 'Hay un problema que impide guardar:'
                : 'Hay ' . count($errores) . ' problemas que impiden guardar:' }}
        </p>
        <ul class="mt-1 space-y-0.5">
            @foreach ($errores as $error)
                <li>
                    @if ($error['linea'])
                        <span class="font-mono font-semibold">Línea {{ $error['linea'] }}:</span>
                    @endif
                    {{ $error['mensaje'] }}
                </li>
            @endforeach
        </ul>
    </div>
@endif

@if ($soloAvisos !== [])
    <div class="mt-2 rounded-lg border border-amber-300 bg-amber-50 px-4 py-3 text-sm text-amber-900">
        <p class="font-semibold">
            {{ count($soloAvisos) === 1 ? 'Un aviso' : count($soloAvisos) . ' avisos' }},
            que no impiden guardar:
        </p>
        <ul class="mt-1 space-y-0.5">
            @foreach ($soloAvisos as $aviso)
                <li>
                    @if ($aviso['linea'])
                        <span class="font-mono font-semibold">Línea {{ $aviso['linea'] }}:</span>
                    @endif
                    {{ $aviso['mensaje'] }}
                </li>
            @endforeach
        </ul>
    </div>
@endif