@props([
    'name',
    'items' => collect(),
    'value' => 'id',
    'text' => 'name',
    'selected' => null,
    'placeholder' => 'Seleccione una opción',
    'idParent' => null,
    'label' => null,
    'autoSelectFirst' => false
])

@php
    $valueSelected = old($name, $selected);

    if (is_null($valueSelected) && $autoSelectFirst && $items->isNotEmpty()) {
        $firstItemValue = data_get($items->first(), $value);
        $valueSelected = $firstItemValue;
    }

    $options = $items
        ->mapWithKeys(
            fn($item) => [
                data_get($item, $value) => data_get($item, $text),
            ],
        )
        ->all();

    if (!$autoSelectFirst && !array_key_exists('', $options)) {
        $options = ['' => $placeholder] + $options;
    }
@endphp
<div {{ $attributes->merge(['class' => 'select-form']) }} @if($idParent) id="{{ $idParent }}" @endif>
    @if($label)
    <label for="{{ $name }}" class="text-parrafo text-black mb-4">{{ $label }}</label>
    @endif
    <div class="relative w-full">
        <select name="{{ $name }}">
            @foreach ($options as $optValue => $optLabel)
                <option value="{{ $optValue }}" @selected((string) $valueSelected === (string) $optValue)>
                    {{ $optLabel }}
                </option>
            @endforeach
        </select>
        <div class="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-accent">
            <x-icons.arrow-down />
        </div>
    </div>
    @error($name)
    <span class="error-text">{{ $message }}</span>
    @enderror
</div>