creating a bootstrap 4 accordion component using laravel @component and @slot directive

card.blade.php

<?php

<div class="card">
    <div class="card-header"
    @isset($cardHeadingId)
        id="{{ $cardHeadingId }}"
    @endisset
    >
      <h2 class="mb-0">
        <button 
        class="btn btn-link collapsed" 
        type="button" 
        data-toggle="collapse"
        @isset($cardCollapseId)
            data-target="{{ '#' . $cardCollapseId }}"
        @endisset
        aria-expanded="true"
        @isset($cardCollapseId)
            aria-controls="{{ $cardCollapseId }}">
        @endisset
        @isset($cardTitle)
            {{ $cardTitle }}
        @endisset
        </button>
      </h2>
    </div>

    <div id="{{ $cardCollapseId }}" class="collapse"
    @isset($cardHeadingId)
        aria-labelledby="{{ $cardHeadingId }}"
    @endisset
    @isset($parentId)
        data-parent="{{ '#' . $parentId }}">
    @endisset
      <div class="card-body">
        @isset($cardBody)
          {{ $cardBody }}
        @endisset
      </div>
    </div>
</div>

index.blade.php

<?php
<div class="accordion" id="accordion1">

@component('card', ['cardHeadingId' => 'headingOne', 'cardCollapseId' => 'collapseOne', 'parentId' => 'accordion1'])

  @slot('cardTitle')
  my card title #1
  @endslot
  
  @slot('cardBody')
    <strong> this the content of my card body</strong> 
  @endslot
  
@endcomponent

</div>