@props([
    'label'       => '',
    'name'        => '',
    'icon'        => null,
    'required'    => false,
    'helpText'    => null,
    'options'     => [],
    'selected'    => null,
    'placeholder' => 'Select an option',
])

<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 sshia-select-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
        <select
            id="{{ $name }}"
            name="{{ $name }}"
            @if($required) required @endif
            {{ $attributes->merge(['class' => 'sshia-select' . ($icon ? ' sshia-input--has-icon' : '')]) }}
        >
            <option value="">{{ $placeholder }}</option>
            @foreach($options as $val => $optLabel)
                <option value="{{ $val }}" {{ old($name, $selected) == $val ? 'selected' : '' }}>
                    {{ $optLabel }}
                </option>
            @endforeach
        </select>
        <span class="sshia-select-chevron" aria-hidden="true">
            <i class="fas fa-chevron-down"></i>
        </span>
    </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>
