@props(['ordem' => null, 'direcao' => 'desc', 'participacao' => true, 'idade' => true])

{{-- Os cabeçalhos das colunas de <x-metricas-celulas>, na mesma ordem. Com
     `ordem`, os que a consulta sabe ordenar viram botão: clicar ordena do
     maior para o menor, clicar de novo inverte. --}}
@php
    $colunas = array_values(array_filter([
        ['quantidade', 'Veículos'],
        $participacao ? [null, 'Participação'] : null,
        ['faturamento', 'Faturamento'],
        ['ticket_medio', 'Valor médio'],
        ['lucro_medio', 'Lucro médio'],
        ['margem', 'Margem'],
        ['dias_patio_medio', 'Dias em pátio'],
        $idade ? ['idade_media', 'Idade na venda'] : null,
    ]));
@endphp

@foreach ($colunas as [$coluna, $rotulo])
    @php $ativa = $ordem !== null && $coluna === $ordem; @endphp
    <th scope="col" class="px-3 py-2.5 text-center font-semibold whitespace-nowrap"
        @if ($ordem !== null && $coluna !== null) aria-sort="{{ $ativa ? ($direcao === 'asc' ? 'ascending' : 'descending') : 'none' }}" @endif>
        @if ($ordem !== null && $coluna !== null)
            <button type="button" wire:click="ordenar('{{ $coluna }}')"
                    @class(['group inline-flex items-center gap-1 uppercase tracking-[0.06em] transition-colors hover:text-marca-700', 'text-marca-700' => $ativa])>
                {{ $rotulo }}
                <span aria-hidden="true" @class(['text-[0.55rem]', 'opacity-0 group-hover:opacity-50' => ! $ativa])>{{ $ativa && $direcao === 'asc' ? '▲' : '▼' }}</span>
            </button>
        @else
            {{ $rotulo }}
        @endif
    </th>
@endforeach