@props([
    'label'    => '',
    'name'     => '',
    'type'     => 'text',
    'icon'     => null,
    'required' => false,
    'helpText' => null,
    'value'    => null,
])

<div class="sshia-field-group">
    @if($label)
        <label for="{{ $name }}" class="sshia-label">
            @if($icon)
                <i class="fas fa-{{ $icon }} sshia-label-icon"></i>
            @endif
            {{ $label }}
            @if($required)
                <span class="sshia-required" aria-hidden="true">*</span>
            @endif
        </label>
    @endif

    <div class="sshia-input-shell @error($name) sshia-input-shell--error @enderror">
        @if($icon)
            <span class="sshia-input-prefix-icon" aria-hidden="true">
                <i class="fas fa-{{ $icon }}"></i>
            </span>
        @endif
        <input
            type="{{ $type }}"
            id="{{ $name }}"
            name="{{ $name }}"
            value="{{ old($name, $value) }}"
            @if($required) required @endif
            {{ $attributes->merge(['class' => 'sshia-input' . ($icon ? ' sshia-input--has-icon' : '')]) }}
        />
    </div>

    @if($helpText)
        <p class="sshia-help-text">{{ $helpText }}</p>
    @endif

    @error($name)
        <p class="sshia-error-text" role="alert">
            <i class="fas fa-circle-exclamation mr-1"></i>{{ $message }}
        </p>
    @enderror
</div>
