@props([
    'routeName',
    'calendarMonth',
    'queryParams' => [],
])

@php
    $calendarMonth = $calendarMonth instanceof \App\Support\CalendarMonth
        ? $calendarMonth
        : \App\Support\CalendarMonth::fromRequest(request());
    $prevMonth = $calendarMonth->date->copy()->subMonth();
    $nextMonth = $calendarMonth->date->copy()->addMonth();
    $prevQuery = (new \App\Support\CalendarMonth($prevMonth))->queryForMonth($queryParams);
    $nextQuery = (new \App\Support\CalendarMonth($nextMonth))->queryForMonth($queryParams);
@endphp

<nav {{ $attributes->merge(['class' => 'flex items-center justify-center gap-2 sm:gap-3 mb-3']) }} aria-label="Calendar month">
    <a
        href="{{ route($routeName, $prevQuery) }}"
        class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-gray-600 hover:bg-gray-100 hover:text-[var(--dealer-accent-color)] focus:outline-none focus:ring-2 focus:ring-[var(--dealer-accent-color)]"
        aria-label="Previous month"
    >
        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
        </svg>
    </a>
    <h2 class="text-sm sm:text-base font-semibold text-gray-900 text-center min-w-[8rem] sm:min-w-[10rem]">
        {{ $calendarMonth->date->format('F Y') }}
    </h2>
    <a
        href="{{ route($routeName, $nextQuery) }}"
        class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-gray-600 hover:bg-gray-100 hover:text-[var(--dealer-accent-color)] focus:outline-none focus:ring-2 focus:ring-[var(--dealer-accent-color)]"
        aria-label="Next month"
    >
        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
    </a>
</nav>