@props(['id', 'title', 'icon' => '', 'active' => false])

<li class="nav-item" role="presentation">
    <a class="nav-link {{ $active ? 'active' : '' }}" data-bs-toggle="pill" href="#{{ $id }}" role="tab" aria-selected="{{ $active ? 'true' : 'false' }}">
        <div class="d-flex align-items-center">
            <div class="tab-icon">{!! $icon !!}</div>
            <div class="tab-title">{{ $title }}</div>
        </div>
    </a>
</li>