@props([
    'id',
    'label',
    'type' => 'text',
    'placeholder' => '',
    'required' => true,
    'model' => '',
    'icon' => null,
    'value' => null,
])

<div class="relative group">
    <div
        class="absolute -inset-0.5 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-lg blur opacity-0 group-hover:opacity-20 transition duration-1000 group-hover:duration-200">
    </div>
    <div class="relative">
        <div class="flex items-center mb-2">
            @if ($icon)
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-700 dark:text-indigo-400 mr-2"
                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $icon }}" />
                </svg>
            @endif
            <label for="{{ $id }}"
                class="block text-sm font-medium text-gray-700 dark:text-gray-200">{{ $label }}</label>
            @if ($required)
                <span class="text-red-500"> *</span>
            @endif
        </div>
        @if ($type === 'textarea')
            <textarea id="{{ $id }}" x-model="{!! $model !!}" name="{{ $id }}" {{ $required ? 'required' : '' }} placeholder="{{ $placeholder }}"
                class="peer w-full px-4 py-3 border-2 border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 shadow-sm focus:ring-2 focus:ring-blue-300 dark:focus:ring-indigo-500 focus:border-blue-500 dark:focus:border-indigo-500 focus:outline-none transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500"
                {{ $attributes }}>{{ $value ?? old($id) ?? '' }}</textarea>
        @else
            <input id="{{ $id }}" x-model="{!! $model !!}" name="{{ $id }}"
                type="{{ $type }}" {{ $required ? 'required' : '' }} placeholder="{{ $placeholder }}"
                value="{{ $value ?? old($id) ?? '' }}"
                class="peer w-full px-4 py-3 border-2 border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 shadow-sm focus:ring-2 focus:ring-blue-300 dark:focus:ring-indigo-500 focus:border-blue-500 dark:focus:border-indigo-500 focus:outline-none transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500"
                {{ $attributes }} />
        @endif
        @error($id)
            <p class="mt-1 text-red-500 dark:text-red-400 text-sm flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
                {{ $message }}
            </p>
        @enderror
    </div>
</div>