@props(['title'=>'ttttt','open'=>1,'chs'=>[]])
<div x-data="{ open: {{$open}} }"
     class="flex flex-col items-center justify-center relative overflow-hidden {{$attributes['class']}}">
    <div @click="open = ! open"  class="cursor-pointer p-4 bg-white w-full flex justify-between items-center ">
        <div class="flex items-center gap-2">
            <h4 class="font-bold text-sm text-black">{{$title}}</h4>
            @if(count($chs) > 0)
                <span class="text-green-500 text-xl font-black ">
                    .
                </span>
                @endif
        </div>

        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"
             stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
        </svg>
    </div>
    <div class="bg-white w-full" x-show="!open"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 translate-y-0"
         x-transition:enter-end="opacity-100 translate-y-0"
         x-transition:leave="transition ease-in duration-300"
         x-transition:leave-start="opacity-100 translate-y-10"
         x-transition:leave-end="opacity-0 translate-y-0">
        @if(count($chs) > 0)
            <ul>
                @foreach($chs as $c)
                    <li>{{$c}}</li>
                @endforeach
            </ul>
        @endif
    </div>
    <div x-show="open"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 translate-y-0"
         x-transition:enter-end="opacity-100 translate-y-0"
         x-transition:leave="transition ease-in duration-300"
         x-transition:leave-start="opacity-100 translate-y-10"
         x-transition:leave-end="opacity-0 translate-y-0" class="w-full bg-white p-2 gap-4 flex flex-col">
        {!! $slot !!}
    </div>
</div>