@props([
    'name',
    'label',
    'type' => 'text',
    'value' => '',
    'required' => false,
    'step' => null,
    'tooltip' => null,
])

<div x-data="{ showTip: false }" class="relative group">
    <label for="{{ $name }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
        {{ $label }}
        @if($tooltip)
            <span
                @mouseenter="showTip = true"
                @mouseleave="showTip = false"
                class="ml-1 text-blue-500 cursor-pointer"
            >ℹ️</span>
        @endif
    </label>

    <input
        id="{{ $name }}"
        name="{{ $name }}"
        type="{{ $type }}"
        value="{{ old($name, $value) }}"
        @if($required) required @endif
        @if($step) step="{{ $step }}" @endif
        {{ $attributes->merge([
            'class' => 'w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm
                        focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
                        dark:bg-gray-700 dark:text-white'
        ]) }}
        @if($attributes->has('x-model'))
            x-model="{{ $attributes->get('x-model') }}"
        @endif
    >

    @if($tooltip)
        <div
            x-show="showTip"
            x-transition
            class="absolute top-0 right-0 bg-gray-800 text-white text-xs rounded py-1 px-2 z-10 mt-8"
            style="white-space: nowrap"
        >
            {{ $tooltip }}
        </div>
    @endif

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