@props(['type'=>null, 'title'=>null, 'icon'=>null, 'key'=>'toggle'])
@php
    $titleCss = ($type == 'sub')? 'border-l-2 pl-2 leading-[1] pb-0.5 border-secondary-500': '';
@endphp
<div x-data="{open: true}"
{{ $attributes->merge(['class' => "bg-white border border-secondary-200 text-secondary-900 rounded-lg shadow-xs min-w-fit max-w-fit"]) }} >
    <div class="flex flex-col">
        <!-- header -->
        <div class="h-8 px-3 flex items-center justify-between text-secondary-900" 
            @click="open = !open; $dispatch('{{$key}}-open', open);"
            :class="{
                'bg-secondary-50':open, 'bg-secondary-300':!open, 
                'rounded-t':open,'rounded':!open }">
            <div class="flex items-center gap-1.5 {{$titleCss}}">
                @isset($icon)
                <i class="{{$icon}}"></i>
                @endisset
                @isset($title)
                <span class="tracking-wider">{{$title}}</span>
                @endisset
            </div>
            <div>
                <span x-show="open"><i class="fa-solid fa-caret-up fa-fw"></i></span>
                <span x-show="!open"><i class="fa-solid fa-caret-down fa-fw"></i></span>
            </div>
        </div>
        <!-- contents -->
        <div x-show="open">{{$slot}}</div>
    </div>
</div>