@props([
    'type' => 'text',
    'name',
    'label' => '',
    'placeholder' => '',
    'value' => '',
    'required' => false,
    'class' => '',
    'validate' => null,
    'disabled' => false,
])

@php
    // Check if a width class is provided in the class prop
    $hasWidthClass = preg_match('/\bw-\S+/', $class);
    $widthClass = $hasWidthClass ? '' : 'w-full';
@endphp

<div class="mb-4">
    @if ($label)
        <label for="{{ $name }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
            {{ lang_trans($label) }} <span class="text-red-600 font-bold">{{ $required ? '*' : '' }}</span>
        </label>
    @endif

    <input 
        type="{{ $type }}" 
        name="{{ $name }}" 
        id="{{ $name }}"
        value="{{ old($name, $value) }}"
        placeholder="{{ lang_trans($placeholder) }}"
        {{ $required ? 'required' : '' }}
        {{ $attributes->merge(['class' => 'mt-2 shadow-theme-xs h-11 ' . $widthClass . ' rounded-lg border px-4 py-2.5 text-sm focus:ring-3 focus:outline-hidden ' . 
            ($disabled 
                ? 'bg-gray-100 dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed' 
                : 'bg-transparent dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-gray-800 dark:text-white/90 focus:border-brand-300 dark:focus:border-brand-800 focus:ring-brand-500/10'
            ) . ' placeholder:text-gray-400 dark:placeholder:text-white/30 ' . $class, 'disabled' => $disabled]) }}
    />
    @if($validate)
        @error($validate)
            <p class="mt-1 text-sm text-red-600">{{ lang_trans($message) }}</p>
        @enderror
    @endif
</div>