@props(['read' => false])

{{-- A tiny meter dial: needle leans left (blue) when today's reading is in,
     right (red) when it's still pending. Literal to the subject rather than
     a generic colored pill. --}}
<span class="badge {{ $read ? 'badge-info' : 'badge-danger' }}" title="{{ $read ? 'Read today' : 'Pending today' }}">
    <svg viewBox="0 0 48 26" width="24" height="14" aria-hidden="true">
        <path d="M4 24 A20 20 0 0 1 24 4" fill="none" stroke="#3b82f6" stroke-width="3" stroke-linecap="round" opacity="0.3"/>
        <path d="M24 4 A20 20 0 0 1 44 24" fill="none" stroke="#dc2626" stroke-width="3" stroke-linecap="round" opacity="0.3"/>
        <line x1="24" y1="24" x2="24" y2="7"
              stroke="{{ $read ? '#3b82f6' : '#dc2626' }}"
              stroke-width="2.5" stroke-linecap="round"
              style="transform-origin: 24px 24px; transform: rotate({{ $read ? '-32deg' : '32deg' }});" />
        <circle cx="24" cy="24" r="2.5" fill="{{ $read ? '#3b82f6' : '#dc2626' }}"/>
    </svg>
    {{ $read ? 'Read today' : 'Pending' }}
</span>