@props([
    'rotulo',
    'valor',
    'anterior' => null,
    'anoPassado' => null,
    'rotulos',
    'altaEBoa' => true,
    'vendas' => 0,
    'resultado' => false,
    'formato' => 'moeda',
    'media' => null,
    'cor' => null,
    'tamanho' => 'normal',
    'despesa' => false,
    'curtos' => ['mês', 'ano'],
    'explicacao' => null,
])

{{-- Um número do mês com os dois comparativos do legado (mês anterior e mesmo
     mês do ano anterior), em etiquetas curtas; o valor comparado aparece ao
     passar o mouse. Resultado ganha fundo pelo sinal. `cor` é a faixa da loja.
     `despesa` põe o valor em vermelho: é a convenção da casa para débito.
     formato: moeda · inteiro · decimal --}}
@php
    $numero = (float) $valor;
    $casas = match ($formato) { 'inteiro' => 0, 'decimal' => 1, default => 2 };
@endphp

<div {{ $attributes->class([
    'relative flex flex-col rounded-lg border p-4',
    'border-fio bg-superficie' => ! $resultado,
    'border-emerald-200 bg-emerald-50/60' => $resultado && $numero >= 0,
    'border-rose-200 bg-rose-50/60' => $resultado && $numero < 0,
]) }}>
    @if ($cor)
        <span class="absolute inset-y-0 left-0 w-1 rounded-l-lg" style="background: {{ $cor }}" aria-hidden="true"></span>
    @endif

    <dt class="flex items-center gap-1.5 text-[0.7rem] font-semibold uppercase tracking-[0.08em] text-suave">
        {{ $rotulo }}
        <x-explicacao :chave="$explicacao"/>
    </dt>
    <dd @class([
        'mt-1.5 font-display font-semibold tracking-tight tabular-nums',
        'text-2xl' => $tamanho === 'normal',
        'text-3xl' => $tamanho === 'grande',
        'text-tinta' => ! $resultado && ! $despesa,
        'text-debito' => ! $resultado && $despesa,
        'text-emerald-800' => $resultado && $numero >= 0,
        'text-rose-800' => $resultado && $numero < 0,
    ])>
        @if ($formato === 'moeda')<span class="mr-1 text-sm font-medium text-suave">R$</span>@endif{{ number_format($numero, $casas, ',', '.') }}
    </dd>
    <dd class="mt-2 flex flex-wrap gap-1.5">
        <x-variacao :atual="$valor" :anterior="$anterior" :rotulo="$rotulos['anterior']" :alta-e-boa="$altaEBoa" :curto="$curtos[0]"/>
        <x-variacao :atual="$valor" :anterior="$anoPassado" :rotulo="$rotulos['anoPassado']" :alta-e-boa="$altaEBoa" :curto="$curtos[1]"/>
    </dd>
    {{ $slot }}
    @if (($formato === 'moeda' && (int) $vendas > 0) || ($media !== null && isset($rotulos['tresMeses'])))
        <dd class="mt-auto space-y-0.5 pt-3 text-xs tabular-nums text-suave">
            @if ($formato === 'moeda' && (int) $vendas > 0)
                <span class="block">{{ number_format($numero / (int) $vendas, 2, ',', '.') }} por veículo</span>
            @endif
            @if ($media !== null && isset($rotulos['tresMeses']))
                <span class="block">média {{ $rotulos['tresMeses'] }}: <span class="text-tinta">{{ number_format((float) $media, $formato === 'moeda' ? 2 : 1, ',', '.') }}</span></span>
            @endif
        </dd>
    @endif
</div>