@props(['prayer', 'next' => null, 'link' => true])

@if(!empty($prayer['times']))
<div {{ $attributes->merge(['class' => 'card overflow-hidden']) }}>
    <div class="flex items-center justify-between bg-primary/10 px-4 py-2.5">
        <span class="flex items-center gap-1.5 text-small font-semibold text-primary">
            <x-icon name="mosque" class="w-4 h-4"/> Jadwal Sholat · {{ $prayer['city'] }}
        </span>
        <div class="flex items-center gap-2 text-caption text-muted">
            @if(!empty($prayer['hijri']))<span class="hidden sm:inline">{{ $prayer['hijri'] }}</span>@endif
            @if($link)<a href="{{ route('prayer.index', ['kota' => $prayer['city']]) }}" class="font-semibold text-primary hover:underline">Lengkap</a>@endif
        </div>
    </div>
    <div class="grid grid-cols-5 divide-x divide-outline/60">
        @foreach($prayer['times'] as $name => $time)
        @php $active = ($next['name'] ?? '') === $name; @endphp
        <div class="px-1 py-3 text-center {{ $active ? 'bg-primary/5' : '' }}">
            <p class="text-caption {{ $active ? 'text-primary font-bold' : 'text-muted' }}">{{ $name }}</p>
            <p class="text-h4 {{ $active ? 'text-primary' : '' }}">{{ $time }}</p>
        </div>
        @endforeach
    </div>
    @if($next)
    <div class="border-t border-outline/60 px-4 py-2 text-center text-caption text-muted">
        Sholat berikutnya: <span class="font-bold text-ink">{{ $next['name'] }} {{ $next['time'] }}</span>
    </div>
    @endif
</div>
@endif