@props(['titulo', 'nota' => null, 'cor' => null])

{{-- Um bloco da tela: título e nota no cabeçalho do próprio cartão. Conteúdo
     largo rola dentro do quadro; a página nunca rola na horizontal, que é o
     que quebra a leitura no celular. `cor` põe o ponto da loja antes do título. --}}
<section {{ $attributes->class(['overflow-hidden rounded-lg border border-fio bg-superficie']) }}>
    <header class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 border-b border-fio px-4 py-3">
        <h2 class="text-sm font-semibold text-tinta">@if ($cor)<span class="relative -top-px mr-2 inline-block size-2 rounded-full align-middle" style="background: {{ $cor }}" aria-hidden="true"></span>@endif{{ $titulo }}</h2>
        <div class="flex flex-wrap items-center gap-x-3 gap-y-1">
            @if ($nota)
                <p class="text-xs text-suave">{{ $nota }}</p>
            @endif
            {{-- Atalho para a tela que detalha este quadro. --}}
            @isset($acao)
                {{ $acao }}
            @endisset
        </div>
    </header>

    <div class="overflow-x-auto">
        {{ $slot }}
    </div>
</section>