@props(['class' => ''])

<div
    id="accordion-content"
    {{ $attributes->merge(['class' => 'px-4 pb-4 text-gray-700 ' . $class]) }}
    x-show="$parent.$parent.isActive($parent.value)"
    x-cloak
    x-transition:enter="transition ease-out duration-200"
    x-transition:enter-start="opacity-0 transform -translate-y-2"
    x-transition:enter-end="opacity-100 transform translate-y-0"
    x-transition:leave="transition ease-in duration-150"
    x-transition:leave-start="opacity-100 transform translate-y-0"
    x-transition:leave-end="opacity-0 transform -translate-y-2"
>
    {{ $slot }}
</div>