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

@php
    $inputClasses = 'w-full px-4 py-2 border rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-slate-50 disabled:text-slate-500';

    if ($error) {
        $inputClasses .= ' border-red-300 focus:ring-red-500';
    } else {
        $inputClasses .= ' border-slate-300';
    }
@endphp

<div {{ $attributes->merge(['class' => 'space-y-2']) }}>
    @if($label)
        <label class="block text-sm font-medium text-slate-700">
            {{ $label }}
            @if($required)
                <span class="text-red-500">*</span>
            @endif
        </label>
    @endif

    @if($type === 'textarea')
        <textarea
            placeholder="{{ $placeholder }}"
            @if($required) required @endif
            @if($disabled) disabled @endif
            rows="4"
            class="{{ $inputClasses }}"
        >{{ $slot }}</textarea>
    @elseif($type === 'select')
        <select
            @if($required) required @endif
            @if($disabled) disabled @endif
            class="{{ $inputClasses }}"
        >
            {{ $slot }}
        </select>
    @else
        <input
            type="{{ $type }}"
            placeholder="{{ $placeholder }}"
            @if($required) required @endif
            @if($disabled) disabled @endif
            class="{{ $inputClasses }}"
        />
    @endif

    @if($error)
        <p class="text-sm text-red-600">{{ $error }}</p>
    @endif
</div>