@props([
    'options' => [],
    'value' => '',
    'hasLabel' => true,
    'isGrouped' => false,
    'labelText' => '',
    'placeholder' => false,
    'name' => ''
])

@if($hasLabel)
    <label for="input-{{$name}}" class="block mb-0.5 text-par-s font-semibold text-lab-pr2">
        {{ $labelText }}
    </label>
@endif
@if(isset($feedbackText))
    <x-forms.valinfo classes="mb-2">
        {{ $feedbackText }}
    </x-forms.valinfo>
@endif
<select {{$attributes}} id="input-{{ $name }}" name="{{ $name }}" class="ring-none text-lab-pr bg-fill-tr text-par-s rounded-lg outline-none hover:ring-1 focus:ring-1 focus:ring-brand-900 block w-full h-10 px-4 placeholder:text-lab-sc placeholder:text-par-s" {{ $attributes }}>
    @if($placeholder)
        <option selected value="">{{ $placeholder }}</option>
    @endif
    @if($isGrouped)
        @foreach ($options as $groupData)
            <optgroup label="{{ $groupData['label'] }}">
                @foreach ($groupData['options'] as $key => $text)
                    <option value="{{$key}}" {{$value == $key ? "selected" : ""}}>
                        {{$text}}
                    </option>
                @endforeach
            </optgroup>
        @endforeach
    @else
        @foreach ($options as $key => $text)
            <option value="{{$key}}" {{$value == $key ? "selected" : ""}}>
                {{$text}}
            </option>
        @endforeach
    @endif
</select>

@error($name)
    <x-forms.valerr>
        {{ $message }}
    </x-forms.valerr>
@enderror