@props(['disabled' => false, 'error' => null, 'options' => [], 'placeholder' => 'Seleccionar...'])

<!-- Contenedor relativo para posicionar la flecha personalizada si quisiéramos (opcional) -->
<div class="relative">
    <select {{ $disabled ? 'disabled' : '' }} {!! $attributes->merge(['class' => '
        appearance-none bg-transparent border-0 border-b-2 border-neutral-700 text-white text-sm 
        py-2.5 px-0 w-full focus:outline-none focus:ring-0 focus:border-neon-lime peer cursor-pointer 
        transition-colors' . ($error ? 'border-red-500 focus:border-red-500' : '')
    ]) !!}>
        
        @if($placeholder)
            <option value="" disabled selected class="bg-neutral-800 text-gray-500">{{ $placeholder }}</option>
        @endif

        {{ $slot }}

    </select>
    
    <!-- Flecha personalizada (SVG) posicionada a la derecha -->
    <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
        <svg class="w-4 h-4 text-gray-500 peer-focus:text-neon-lime transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
    </div>

    <!-- Mensaje de error -->
    @if($error)
        <p class="mt-1 text-xs text-red-400">{{ $error }}</p>
    @endif
</div>

{{-- 
    NOTA DE ESTILO: 
    - `appearance-none`: Quita el estilo feo por defecto del navegador.
    - `bg-transparent`: Fondo transparente para que se vea el color de fondo de tu web.
    - `border-b-2`: Borde solo abajo (estilo línea).
    - `focus:ring-0`: Quita el anillo azul de Chrome al hacer click.
    - `peer`: Permite que el icono de la flecha cambie de color cuando el select tiene foco.
--}}