<ul class="relative flex flex-col md:flex-row gap-2">
    @foreach ($steps as $index => $step)
        @php
            $stepNumber = $index + 1;
            $isCompleted = $stepNumber < $currentStep;
            $isActive = $stepNumber === $currentStep;
        @endphp

        <li class="md:shrink md:basis-0 flex-1 group flex gap-x-2 md:block">
            <div
                class="min-w-7 min-h-7 flex flex-col items-center md:w-full md:inline-flex md:flex-wrap md:flex-row text-xs align-middle">

                {{-- Circle --}}
                <span @class([
                    'size-7 flex justify-center items-center shrink-0 rounded-full font-medium',
                    'bg-primary-600 text-white' => $isActive || $isCompleted,
                    'bg-gray-100 text-gray-800 dark:bg-neutral-700 dark:text-white' =>
                        !$isActive && !$isCompleted,
                ])>
                    @if ($isCompleted)
                        ✓
                    @else
                        {{ $stepNumber }}
                    @endif
                </span>

                {{-- Line --}}
                <div
                    class="mt-2 w-px h-full md:mt-0 md:ms-2 md:w-full md:h-px md:flex-1
                    {{ $loop->last ? 'hidden' : 'bg-gray-200 dark:bg-neutral-700' }}">
                </div>
            </div>

            {{-- Content --}}
            <div class="grow md:grow-0 md:mt-3 pb-5">
                <span @class([
                    'block text-sm font-medium',
                    'text-primary-600' => $isActive || $isCompleted,
                    'text-gray-800 dark:text-white' => !$isActive && !$isCompleted,
                ])>
                    {{ $step['title'] }}
                </span>

                <p class="text-sm text-gray-800 dark:text-neutral-500">
                    {{ $step['description'] }}
                </p>
            </div>
        </li>
    @endforeach
</ul>
