@props(['categories', 'currency' => 'TL', 'clickable' => true])

@if(isset($categories) && $categories->count())
@foreach($categories as $category)
<div class="py-3 pl-4 mb-2 overflow-hidden bg-white border rounded-lg shadow border-stone-300">
    <h2 id="accordion-heading-{{ $category->id }}">
        <button type="button" class="flex items-center justify-between w-full text-stone-500"
            data-accordion-target="#accordion-body-{{ $category->id }}" aria-expanded="true"
            aria-controls="accordion-body-{{ $category->id }}">
            <h1 class="text-xl text-left text-stone-500">
                {{ $category->name }}
            </h1>
            <svg data-accordion-icon class="w-3 h-3 mr-4 rotate-180 shrink-0" aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M9 5 5 1 1 5" />
            </svg>
        </button>
    </h2>

    <div id="accordion-body-{{ $category->id }}" class="hidden mt-3"
        aria-labelledby="accordion-heading-{{ $category->id }}">
        @foreach($category->products as $product)
        @include('menu.partials.product-card', ['product' => $product, 'category' => $category, 'currency' =>
        $currency, 'clickable' => $clickable])
        @endforeach
    </div>
</div>
@endforeach
@endif