@props(['faqs' => [], 'showHeader' => true])

<section id="faq" aria-labelledby="faq-title" class="mt-6 lg:mt-8">
    @if ($showHeader)
    <div class="mb-3 flex items-center justify-between gap-3">
        <h2 id="faq-title" class="text-[17px] font-bold text-navy lg:text-xl">{{ __('ui.faq_title') }}</h2>
        <a href="{{ route('faq') }}" 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>
    @endif
    <div class="flex flex-col gap-2">
        @foreach ($faqs as $faq)
            <div class="faq-item rounded-xl border border-[#EEF1F6] bg-white">
                <h3>
                    <button
                        type="button"
                        id="faq-q-{{ $faq['id'] }}"
                        data-faq-toggle
                        class="flex w-full items-center justify-between gap-3 px-3.5 py-3 text-left text-[13px] font-semibold text-navy lg:text-sm"
                        aria-expanded="false"
                        aria-controls="faq-a-{{ $faq['id'] }}"
                    >
                        <span>{{ $faq['question'] }}</span>
                        <x-store.icon name="chevron-down" class="faq-chevron text-brand" width="16" height="16" />
                    </button>
                </h3>
                <div id="faq-a-{{ $faq['id'] }}" data-faq-panel role="region" aria-labelledby="faq-q-{{ $faq['id'] }}">
                    <div class="faq-panel-inner">
                        <p class="px-3.5 pb-3 text-[12px] leading-snug text-muted lg:text-[13px]">{{ $faq['answer'] }}</p>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</section>