@props([
    'type' => 'text',
    'placeholder' => '',
    'label' => null,
    'id' => null,
    'name' => null,
    'value' => null,
])

<div>
    @if($label)
        <x-input-label :for="$id" :value="$label" />
    @endif

    <div class="relative">
        {{-- Left slot (non-clickable) --}}
        @isset($left)
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                {{ $left }}
            </div>
        @endisset

        {{-- Input field --}}
        <x-text-input
            :id="$id"
            :name="$name"
            :type="$type"
            :placeholder="$placeholder"
            :value="$value"
            {{ $attributes->class([
                'pl-10' => isset($left),
                'pr-10' => isset($right),
                'pl-3' => !isset($left),
                'pr-3' => !isset($right),
                'py-2 w-full border border-gray-300 rounded-lg input-focus focus:outline-none focus:border-primary transition-colors'
            ]) }}
        />

        {{-- Right slot (interactive) --}}
        @isset($right)
            <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
                {{ $right }}
            </div>
        @endisset
    </div>

    {{-- Error messages --}}
    <x-input-error :messages="$errors->get($name)" class="mt-2" />
</div>