@props(['title', 'open'=>'true'])
<div x-data="{openBlock:{{$open}}}" class="block-box">
    <button type="button" @click="openBlock=!openBlock" 
        class="flex items-center justify-between w-full 00bg-secondary-245 bg-primary-100 text-primary-900 px-2 py-1 text-sm pl-2">
        <span>{{$title}}</span>
        <span><i class="fa-solid fa-angle-down" :class="{'rotate-180':openBlock}"></i></span>
    </button>
    <div
        :class="openBlock? 'max-h-full overflow-visible': 'max-h-0 overflow-hidden'"
        class="bg-white transition-all ease-linear px-1">
        {{$slot}}
    </div>
</div>