@props([
    'id' => null,
    'error' => '',
    'label' => '',
    'name' => '',
    'placeholder' => 'Select one',
    'value' => '',
    'options' => [],
])

@php
    $id = $id ?: $name;

    if (!$error && $errors->has($name)) {
        $error = $errors->first($name);
    }
@endphp

<div>
    <label for="{{ $id }}" @class([
        'block mb-2 font-bold empty:hidden',
        'text-red-500' => $error,
        'text-neutral-100' => !$error,
    ])>{{ $label }}</label>

    <select id="{{ $id }}" name="{{ $name }}" aria-invalid="{{ $error ? 'true' : 'false' }}"
        aria-describedby="{{ $error ? $id . '-error' : '' }}"
        {{ $attributes->merge([
            'class' =>
                'flex cursor-text w-full px-[1.875rem] py-3 rounded-2xl border border-neutral-700 border-solid bg-neutral-800 outline-none transition hover:shadow',
        ]) }}>
        <option value="" selected>{{ $placeholder }}</option>

        @foreach ($options as $optionValue => $optionLabel)
            <option value="{{ $optionValue }}"
                {{ strtolower($optionValue) == strtolower(old($name, $value)) ? 'selected' : '' }}>
                {{ $optionLabel }}
            </option>
        @endforeach

        {{ $slot }}
    </select>

    @if ($error)
        <p id="{{ $id }}-error" class="mt-2 text-sm text-red-600">
            {{ $error }}
        </p>
    @endif
</div>