@props([
    'label' => null,
    'error' => null,
    'help' => null,
    'icon' => null,
    'type' => 'text',
    'placeholder' => '',
    'required' => false
])

<div class="kmc-input-group">
    @if($label)
        <label class="kmc-input-label">
            {{ $label }}
            @if($required)
                <span class="kmc-input-required">*</span>
            @endif
        </label>
    @endif

    <div class="kmc-input-wrapper {{ $icon ? 'kmc-input-wrapper--with-icon' : '' }} {{ $error ? 'kmc-input-wrapper--error' : '' }}">
        @if($icon)
            <iconify-icon icon="{{ $icon }}" class="kmc-input-icon"></iconify-icon>
        @endif

        <input
            type="{{ $type }}"
            placeholder="{{ $placeholder }}"
            {{ $attributes->merge(['class' => 'kmc-input' . ($error ? ' kmc-input--error' : '')]) }}
            @if($required) required @endif
        />
    </div>

    @if($help && !$error)
        <span class="kmc-input-help">{{ $help }}</span>
    @endif

    @if($error)
        <span class="kmc-input-error">{{ $error }}</span>
    @endif
</div>