@props([
  'month' => 'July 2026',
  'days' => null,
  'selected' => 13,
])

@php
  /** @var array<int, array{label:string, muted?:bool, event?:bool}>|null $days */
  $days = $days ?? [
    ['label' => '29', 'muted' => true],
    ['label' => '30', 'muted' => true],
    ['label' => '1'], ['label' => '2'], ['label' => '3'], ['label' => '4'], ['label' => '5'],
    ['label' => '6'], ['label' => '7'], ['label' => '8'], ['label' => '9'], ['label' => '10'], ['label' => '11'], ['label' => '12'],
    ['label' => '13', 'event' => true],
    ['label' => '14'], ['label' => '15', 'event' => true], ['label' => '16'], ['label' => '17'], ['label' => '18'], ['label' => '19'],
    ['label' => '20'], ['label' => '21', 'event' => true], ['label' => '22'], ['label' => '23'], ['label' => '24'], ['label' => '25'], ['label' => '26'],
    ['label' => '27'], ['label' => '28'], ['label' => '29'], ['label' => '30'], ['label' => '31'],
    ['label' => '1', 'muted' => true], ['label' => '2', 'muted' => true],
  ];
@endphp

<div {{ $attributes->class(['cal-widget']) }}>
  <div class="cal-widget__header">
    <button type="button" class="btn btn-ghost btn-sm" aria-label="Previous month">
      <i class="bi bi-chevron-left" aria-hidden="true"></i>
    </button>
    <p class="cal-widget__month">{{ $month }}</p>
    <button type="button" class="btn btn-ghost btn-sm" aria-label="Next month">
      <i class="bi bi-chevron-right" aria-hidden="true"></i>
    </button>
  </div>

  <div class="cal-widget__weekdays" aria-hidden="true">
    <span>Su</span><span>Mo</span><span>Tu</span><span>We</span><span>Th</span><span>Fr</span><span>Sa</span>
  </div>

  <div class="cal-widget__grid" role="grid" aria-label="{{ $month }}">
    @foreach ($days as $day)
      @php
        $isSelected = (int) $day['label'] === (int) $selected && empty($day['muted']);
      @endphp
      <button
        type="button"
        class="cal-widget__day
          {{ !empty($day['muted']) ? 'is-muted' : '' }}
          {{ $isSelected ? 'is-selected' : '' }}
          {{ !empty($day['event']) ? 'has-event' : '' }}"
        @if (!empty($day['muted'])) tabindex="-1" aria-hidden="true" @endif
      >
        {{ $day['label'] }}
      </button>
    @endforeach
  </div>

  <div class="cal-widget__events">
    {{ $slot }}
  </div>
</div>