@props(['valor', 'modelo' => 'mes', 'legenda' => 'Mês', 'minimo' => '2019-01', 'maximo' => null, 'alinhar' => 'direita'])

{{-- Mês com anterior e seguinte a um clique, e o nome do mês abrindo um
     painel com os doze meses do ano — e, pelo título, os anos. De agosto/2026
     a dezembro/2025 são dois cliques, e não oito setas. O teto é o mês
     corrente: depois dele não há movimento para mostrar. --}}
@php
    $nomes = ['janeiro', 'fevereiro', 'março', 'abril', 'maio', 'junho', 'julho', 'agosto', 'setembro', 'outubro', 'novembro', 'dezembro'];
    $data = new DateTimeImmutable(($valor ?: date('Y-m')).'-01');
    $maximo ??= date('Y-m');
    $anterior = $data->modify('-1 month')->format('Y-m');
    $seguinte = $data->modify('+1 month')->format('Y-m');
    $rotulo = $nomes[(int) $data->format('n') - 1].' de '.$data->format('Y');
    $id = 'seletor-'.$modelo;
@endphp

<div class="text-sm">
    <span id="{{ $id }}-legenda" class="block text-xs font-medium text-suave">{{ $legenda }}</span>
    <div class="relative mt-1" x-data="calendario(@js(['modelo' => $modelo, 'valor' => $data->format('Y-m'), 'tipo' => 'mes', 'minimo' => $minimo.'-01', 'maximo' => $maximo.'-31']))">
        <div class="flex items-stretch overflow-hidden rounded-md border border-fio bg-superficie shadow-xs">
            <button type="button" wire:click="$set('{{ $modelo }}', '{{ $anterior }}')" @disabled($anterior < $minimo)
                    class="px-2.5 text-suave hover:bg-chao hover:text-tinta focus-visible:outline-2 focus-visible:outline-marca-600 disabled:opacity-30" aria-label="Mês anterior">
                <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/></svg>
            </button>
            <button type="button" id="{{ $id }}" x-on:click="aberto ? fechar() : abrir()"
                    aria-haspopup="dialog" x-bind:aria-expanded="aberto ? 'true' : 'false'" aria-labelledby="{{ $id }}-legenda {{ $id }}"
                    class="flex min-w-40 items-center justify-center gap-1.5 border-x border-fio px-3 py-1.5 font-medium text-tinta hover:bg-chao focus-visible:outline-2 focus-visible:outline-marca-600">
                {{ $rotulo }}
                <svg class="size-3.5 text-suave" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="5" width="17" height="15" rx="2"/><path stroke-linecap="round" d="M3.5 9.5h17M8 3v4M16 3v4"/></svg>
            </button>
            <button type="button" wire:click="$set('{{ $modelo }}', '{{ $seguinte }}')" @disabled($seguinte > $maximo)
                    class="px-2.5 text-suave hover:bg-chao hover:text-tinta focus-visible:outline-2 focus-visible:outline-marca-600 disabled:opacity-30" aria-label="Mês seguinte">
                <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg>
            </button>
        </div>
        @include('components.partes.painel-calendario', ['alinhar' => $alinhar])
    </div>
</div>