@props(['label', 'name', 'options', 'error' => null])

@php
$label = $label ?? false;
$options = json_decode($options, true) ?? [];
$error = json_decode($error, true) ?? [];
$selectedIndex = isset($attributes['selectedIndex']) ? $attributes['selectedIndex'] : 0;
@endphp

<div class="form-control w-full flex {{ !empty($error[0]) ? 'flex-col space-y-1' : 'items-center space-x-4' }}">
    @if (!empty($error[0]))
        <div class="flex items-center space-x-4">
    @endif
    @if ($label)
        <label for="{{ $name }}" class="text-sm min-w-1/4">{{ $label }}</label>
    @endif

    <select name="{{ $name }}" id="{{ $name }}"
        {{ $attributes->merge(['class' => 'w-full appearance-none border-0 bg-transparent text-black py-1 px-0 focus:outline-none focus:border-transparent']) }}>
        @if (isset($attributes['defaultOption']))
            <option>{{ trans($attributes['defaultOption']) }}</option>
        @endif
        @foreach ($options as $key => $value)
            <option value="{{ $key }}" {{ $key != $selectedIndex ? '' : 'selected' }}>
                {{ trans($value) }}</option>
        @endforeach
    </select>
    @if (!empty($error[0]))
</div>
<div class="flex items-center space-x-4">
    <span class="block min-w-1/4"></span>
    <span class="text-red-500 text-sm">{{ $error[0] }}</span>
</div>
@endif
</div>