@props([
    'key' => null,
    'mode' => 'tooltip',
    'text' => null,
    'class' => '',
])

@php
    $helpText = $text ?? ($key ? __('locale.feature_help.'.$key) : '');
    $hasContent = filled($helpText) && $helpText !== 'locale.feature_help.'.$key;
@endphp

@if($hasContent)
    @if($mode === 'inline')
        <small class="text-muted d-block mt-25 {{ $class }}">{!! $helpText !!}</small>
    @elseif($mode === 'block')
        <div class="alert alert-light border py-75 px-1 mb-1 feature-help-block {{ $class }}" role="note">
            <i data-feather="info" class="feather-14 me-50 align-text-top"></i>
            <span class="small">{!! $helpText !!}</span>
        </div>
    @else
        <i data-feather="help-circle"
           class="feather-14 ms-25 text-muted align-text-top feature-help-tooltip {{ $class }}"
           data-bs-toggle="tooltip"
           data-bs-placement="top"
           title="{!! strip_tags($helpText) !!}"
           tabindex="0"
           role="img"
           aria-label="{{ strip_tags($helpText) }}"></i>
    @endif
@endif