@props(['name', 'label', 'options' => [], 'selected' => '', 'required' => false])

<div>
    <label for="{{ $name }}" class="block font-medium mb-1 text-gray-700 dark:text-gray-300">
        {{ $label }}
    </label>

    <select
        id="{{ $name }}"
        name="{{ $name }}"
        @if($required) required @endif
        {{ $attributes->merge([
            'class' => 'w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm
                        dark:bg-gray-700 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500'
        ]) }}
        @if ($attributes->has('x-model')) x-model="{{ $attributes->get('x-model') }}" @endif
    >
        <option value="">-- Pilih --</option>
        @foreach($options as $key => $val)
            <option value="{{ $key }}" @if($selected == $key) selected @endif>{{ $val }}</option>
        @endforeach
    </select>

    @error($name)
        <p class="text-sm text-red-500 mt-1">{{ $message }}</p>
    @enderror
</div>