@props(['status'])

@php
$steps = [
    'menunggu' => 'Menunggu',
    'diproses' => 'Diproses',
    'disetujui' => 'Disetujui',
    'selesai' => 'Selesai',
];
$order = array_keys($steps);
$currentIndex = array_search($status, $order);
$isRejected = $status === 'ditolak';
@endphp

@if($isRejected)
    <div class="flex items-center gap-3 p-4 bg-red-50 dark:bg-red-900/20 rounded-xl">
        <div class="w-10 h-10 rounded-full bg-red-500 flex items-center justify-center text-white shrink-0">
            <x-icon name="x" class="w-5 h-5" />
        </div>
        <div>
            <p class="font-bold text-red-700 dark:text-red-400">Pengajuan Ditolak</p>
            <p class="text-xs text-red-500 dark:text-red-400/80">Lihat alasan penolakan di bawah</p>
        </div>
    </div>
@else
    <div class="flex items-center">
        @foreach($steps as $key => $label)
            @php $idx = array_search($key, $order); @endphp
            <div class="flex items-center {{ !$loop->last ? 'flex-1' : '' }}">
                <div class="flex flex-col items-center gap-2">
                    <div class="w-9 h-9 rounded-full flex items-center justify-center shrink-0 transition
                        {{ $idx <= $currentIndex ? 'bg-primary-700 text-white' : 'bg-slate-100 dark:bg-slate-700 text-slate-400' }}">
                        @if($idx < $currentIndex)
                            <x-icon name="check" class="w-4 h-4" />
                        @else
                            <span class="text-xs font-bold">{{ $idx + 1 }}</span>
                        @endif
                    </div>
                    <span class="text-[11px] font-medium text-center {{ $idx <= $currentIndex ? 'text-primary-700 dark:text-primary-400' : 'text-slate-400' }}">{{ $label }}</span>
                </div>
                @if(!$loop->last)
                    <div class="flex-1 h-1 mx-1 rounded {{ $idx < $currentIndex ? 'bg-primary-700' : 'bg-slate-100 dark:bg-slate-700' }}"></div>
                @endif
            </div>
        @endforeach
    </div>
@endif