@php
    $accordionName = ($name ?? 'accordionName')
@endphp

<div x-data="{ {{$accordionName}}: false }" class="relative {{$class ?? ''}}">
  <button x-cloak @click="{{$accordionName}} = !{{$accordionName}} " class="com-accordion-button">
      {{$accordionButton ?? 'Accordion Button'}}
  </button>
  
  <div  x-show="{{$accordionName}}" 
        x-transition:enter="transition ease-out duration-100" 
        x-transition:enter-start="opacity-0 scale-y-90" 
        x-transition:enter-end="opacity-100 scale-y-100" 
        x-transition:leave="transition ease-in duration-100" 
        x-transition:leave-start="opacity-100 scale-y-100" 
        x-transition:leave-end="opacity-0 scale-y-90" 
        class="com-accordion-wrapper" style="display:none">

        {{$accordionContent ?? 'Accordion Content'}}

  </div>
</div>