@props(['categories' => []])

<section id="shop-categories" aria-labelledby="shop-categories-title" class="mt-5 lg:mt-6">
    <div class="mb-2.5 flex items-center justify-between gap-3 lg:mb-3">
        <h2 id="shop-categories-title" class="text-[17px] font-bold text-navy lg:text-xl">{{ __('ui.shop_by_category') }}</h2>
        <a href="{{ route('categories.index') }}" class="inline-flex items-center gap-1 text-[13px] font-semibold text-brand">
            {{ __('ui.view_all') }}
            <x-store.icon name="arrow-right" width="14" height="14" />
        </a>
    </div>
    <div class="category-scroll -mx-3 flex gap-3 overflow-x-auto px-3 pb-1 lg:hidden">
        @foreach ($categories as $category)
            <a href="{{ route('categories.show', $category['slug'] ?? $category['filter']) }}" data-filter="{{ $category['filter'] }}" class="flex w-[5.15rem] shrink-0 snap-start flex-col items-center text-center">
                <span class="grid size-[4.75rem] place-items-center overflow-hidden rounded-full border border-[#E6E8EE] bg-[#F4F5F7]">
                    @if (! empty($category['image_path']))
                        <x-store.picture :path="$category['image_path']" alt="" sizes="76px" class="size-full object-cover" />
                    @else
                        <x-store.image-placeholder :label="$category['image']" class="size-[4.15rem] rounded-full" />
                    @endif
                </span>
                <span class="mt-1.5 line-clamp-2 w-full text-[11px] font-medium leading-tight text-navy">{{ $category['label'] }}</span>
            </a>
        @endforeach
    </div>
    <div class="hidden lg:grid lg:grid-cols-8 lg:gap-3">
        @foreach ($categories as $category)
            <a href="{{ route('categories.show', $category['slug'] ?? $category['filter']) }}" data-filter="{{ $category['filter'] }}" class="flex min-w-0 flex-col items-center text-center">
                <span class="grid size-[6.5rem] place-items-center overflow-hidden rounded-full border border-[#E6E8EE] bg-[#F4F5F7] transition duration-200 hover:-translate-y-0.5">
                    @if (! empty($category['image_path']))
                        <x-store.picture :path="$category['image_path']" alt="" sizes="76px" class="size-full object-cover" />
                    @else
                        <x-store.image-placeholder :label="$category['image']" class="size-[5.5rem] rounded-full" />
                    @endif
                </span>
                <span class="mt-2 line-clamp-2 text-[13px] font-medium leading-tight text-navy">{{ $category['label'] }}</span>
            </a>
        @endforeach
    </div>
</section>