@props(['question', 'answer'])

<div class="border border-gray-200 rounded-xl overflow-hidden bg-med-gray shadow-sm">
    <button class="faq-btn w-full px-6 py-4 text-left flex justify-between items-center bg-white hover:bg-gray-50 focus:outline-none transition-colors">
        <span class="text-lg font-medium text-med-dark">{{ $question }}</span>
        <span class="transform transition-transform duration-300 icon-wrapper">
            <i class="fa-solid fa-chevron-down text-med-primary"></i>
        </span>
    </button>
    <div class="faq-content bg-gray-50">
        <div class="px-6 pb-6 pt-2 text-gray-600 leading-relaxed">
            {{ $answer }}
        </div>
    </div>
</div>