@props(['faqs' => []])
<div id="faq" class="mx-auto max-w-3xl">
  @foreach ($faqs as $index => $faq)
    <div class="accordion-item border-b border-gray-200">
      <div class="collapse">
        <input type="radio" name="faq-accordion" id="faq-{{ $index + 1 }}"/>
        {{-- Header --}}
        <label for="faq-{{ $index + 1 }}" class="collapse-title pl-8 text-xl font-medium text-[#033551]">
          {{ $faq['question'] }}
        </label>
        {{-- Content Collapsed --}}
        <div class="collapse-content pl-8">
          <p class="py-2 leading-tight text-[#033551]">{{ $faq['answer'] }}</p>
        </div>
      </div>
      <div class="icon">
        <div class="line-v"></div>
        <div class="line-h"></div>
      </div>
    </div>
  @endforeach
</div>