@props([
    'title',
    'status' => null,
    'questionsCount' => 0,
    'progressEligible' => 0,
    'progressStarted' => 0,
    'progressPending' => 0,
    'progressPercent' => 0,
    'sectorName' => null,
    'trainingGroupName' => null,
    'href' => null,
    'size' => 'default',
])

@php
    $isLarge = $size === 'lg';
    $titleClass = $isLarge ? 'text-lg font-semibold text-gray-900' : 'text-sm font-semibold text-gray-900';
    $barHeight = $isLarge ? 'h-3' : 'h-1.5';
    $statsClass = $isLarge ? 'text-sm text-gray-600' : 'text-xs text-gray-600';
    $percentClass = $isLarge ? 'text-base font-bold tabular-nums text-gray-900' : 'text-xs font-semibold text-gray-800';
    $metaClass = $isLarge ? 'text-sm text-gray-500' : 'text-xs text-gray-500';
    $padding = $isLarge ? 'p-5 sm:p-6' : 'p-4';
@endphp

<article {{ $attributes->merge(['class' => "rounded-xl border border-gray-200 bg-white shadow-sm {$padding}"]) }}>
  <div class="flex flex-wrap items-start justify-between gap-3">
    <div class="min-w-0 flex-1">
      @if($href)
        <a href="{{ $href }}" class="{{ $titleClass }} hover:text-blue-700 hover:underline line-clamp-2">
          {{ $title }}
        </a>
      @else
        <h3 class="{{ $titleClass }} line-clamp-2">{{ $title }}</h3>
      @endif
      @if($sectorName || $trainingGroupName)
        <p class="{{ $metaClass }} mt-1">
          @if($sectorName)<span>{{ $sectorName }}</span>@endif
          @if($sectorName && $trainingGroupName)<span class="text-gray-300 mx-1">·</span>@endif
          @if($trainingGroupName)<span>{{ $trainingGroupName }}</span>@endif
        </p>
      @endif
    </div>
    <div class="flex flex-wrap items-center gap-2 shrink-0">
      @if($status)
        <span class="inline-flex rounded-full bg-gray-100 px-2.5 py-1 text-xs font-medium text-gray-700">
          {{ $status }}
        </span>
      @endif
      <span class="inline-flex rounded-full bg-indigo-50 px-2.5 py-1 text-xs font-medium text-indigo-800">
        {{ $questionsCount }} {{ $questionsCount === 1 ? 'pergunta' : 'perguntas' }}
      </span>
    </div>
  </div>

  <div class="mt-5">
    @if($progressEligible === 0)
      <p class="{{ $statsClass }} text-gray-400">Sem participantes elegíveis no escopo desta bateria.</p>
    @else
      <div class="flex flex-wrap items-end justify-between gap-2 mb-2">
        <span class="{{ $statsClass }} font-medium text-gray-700">Progresso de início</span>
        <span class="{{ $percentClass }}">{{ $progressPercent }}%</span>
      </div>
      <div
        class="{{ $barHeight }} w-full overflow-hidden rounded-full bg-gray-200"
        role="progressbar"
        aria-valuenow="{{ $progressPercent }}"
        aria-valuemin="0"
        aria-valuemax="100"
        aria-label="Progresso de início da bateria {{ $title }}"
      >
        <div
          class="h-full rounded-full bg-emerald-600 transition-all"
          style="width: {{ $progressPercent }}%"
        ></div>
      </div>
      <p class="{{ $statsClass }} mt-3 leading-relaxed">
        <span class="font-semibold text-emerald-700">{{ $progressStarted }}</span> iniciaram
        <span class="text-gray-400 mx-1">·</span>
        <span class="font-semibold text-amber-700">{{ $progressPending }}</span> pendentes
        <span class="text-gray-500">de {{ $progressEligible }} elegíveis</span>
      </p>
    @endif
  </div>
</article>