@props(['question'])

<div x-data="{ open: false }" class="rounded-xl border border-gray-800 bg-gray-900 overflow-hidden">
    <button type="button" x-on:click="open = ! open" class="flex w-full items-center justify-between gap-4 px-5 py-4 text-left">
        <span class="font-medium text-white">{{ $question }}</span>
        <x-ui-icon name="chevron-down" class="h-4 w-4 shrink-0 text-gray-400 transition" x-bind:class="open ? 'rotate-180' : ''" />
    </button>
    <div x-show="open" x-cloak x-transition class="px-5 pb-4 text-sm text-gray-400">
        {{ $slot }}
    </div>
</div>