@props([
    'open' => false,
    'icon' => null,
    'title' => '',
    'description' => '',
])

<x-frontend.animation>
    <div x-data="{ open: {{ $open ? 'true' : 'false' }} }" class="overflow-hidden border-2 rounded-2xl border-iron/10">

        <div @click="open = !open"
            class="flex items-center justify-between gap-6 p-4 cursor-pointer bg-gradient-to-b from-white to-gray-100">
            <div class="flex items-center gap-6">
                @if ($icon)
                    <div class="flex-none">
                        <img src="{{ asset($icon) }}" alt="{{ $title }}" width="54" height="54">
                    </div>
                @endif
                <div class="text-lg font-bold font-headline text-laurel lg:text-xl">
                    {{ $title }}
                </div>
            </div>
            <div class="text-laurel" :class="open ? 'rotate-180' : ''">
                <x-frontend.icons.arrow-down stroke="2.5" />
            </div>
        </div>

        <div x-cloak x-show="open" x-collapse.duration.300ms>
            <div class="p-4 bg-white lg:pl-24">
                <x-frontend.typography>
                    {{ $slot }}
                </x-frontend.typography>
            </div>
        </div>
    </div>
</x-frontend.animation>