{{-- 
Input Text Component
Usage:
<x-ui.inputs.text name="email" label="Email Address" placeholder="Enter your email" />
<x-ui.inputs.text name="password" type="password" label="Password" required />
<x-ui.inputs.text name="disabled-input" label="Disabled Input" disabled />
<x-ui.inputs.text name="with-error" label="Input with Error" error="This field is required" />
--}}

@props([
    'name',
    'label' => null,
    'type' => 'text',
    'error' => null,
    'disabled' => false,
])

<div class="w-full">
    @if($label)
        <label for="{{ $name }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
            {{ $label }}
            @if($attributes->has('required'))
                <span class="text-red-500">*</span>
            @endif
        </label>
    @endif
    
    <input 
        id="{{ $name }}"
        name="{{ $name }}"
        type="{{ $type }}"
        {{ $disabled ? 'disabled' : '' }}
        {{ $attributes->merge([
            'class' => 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:focus:border-primary-500 dark:focus:ring-primary-500 disabled:opacity-50 disabled:cursor-not-allowed' . ($error ? ' border-red-300 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500' : '')
        ]) }}
    />
    
    @if($error)
        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $error }}</p>
    @endif
</div>