@props([
    'items' => [],
    'current' => '',
])

<div class="pt-4 lg:pt-10">
    <div class="container max-w-7xl mx-auto">
        <nav class="flex overflow-x-auto" aria-label="Breadcrumb">
            {{-- PC --}}
            <ol class="items-center space-x-1 md:space-x-3 whitespace-nowrap hidden lg:inline-flex">
                @php
                    $count = count($items);
                    $last = $count - 1;
                @endphp
                @foreach ($items as $k_item => $item)
                    @if ($k_item == $last)
                        @break
                    @endif
                    <li>
                        @if ($loop->first)
                            <a class="inline-flex items-center text-gray-500 hover:text-primary transition-colors" href="{{ $item['url'] ?? 'javascript:void(0)' }}">
                                {!! $item['title'] !!}
                            </a>
                        @else
                            <div class="flex items-center">
                                <span class="icon-[tabler--chevron-right] size-4 text-gray-400"></span>
                                <a class="ml-1 text-gray-500 hover:text-primary transition-colors md:ml-2" href="{{ $item['url'] ?? 'javascript:void(0)' }}">
                                    {!! $item['title'] !!}
                                </a>
                            </div>
                        @endif
                    </li>
                @endforeach
                <li aria-current="page">
                    <div class="flex items-center">
                        <span class="icon-[tabler--chevron-right] size-4 text-gray-400"></span>
                        <span class="ml-1 text-primary font-medium md:ml-2 truncate max-w-[200px] md:max-w-none">
                            {!! $current !!}
                        </span>
                    </div>
                </li>
            </ol>

            {{-- Mobile --}}
            <ol class="items-center space-x-1 md:space-x-3 whitespace-nowrap inline-flex lg:hidden">
                @if (count($items) > 0)
                    <li>
                        <div class="flex items-center">
                            <a class="ml-1 text-gray-500 hover:text-primary transition-colors md:ml-2" href="{{ end($items)['url'] ?? 'javascript:void(0)' }}">
                                {!! end($items)['title'] !!}
                            </a>
                        </div>
                    </li>
                @endif
                <li aria-current="page">
                    <div class="flex items-center">
                        <span class="icon-[tabler--chevron-left] size-4 text-gray-400"></span>
                        <span class="ml-1 text-primary font-medium md:ml-2 truncate max-w-[200px] md:max-w-none">
                            {!! $current !!}
                        </span>
                    </div>
                </li>
            </ol>
        </nav>
    </div>
</div>