@props([
    'name',
    'label' => null,
    'type' => 'text',
    'value' => null,
    'hint' => null,
    'required' => false,
    'placeholder' => null,
    'prefix' => null,
])

@php
    $id = $attributes->get('id') ?? $name;
    $hasError = $errors->has($name);
    $inputClass = 'hms-input'.($hasError ? ' border-red-400 focus:border-red-500 focus:ring-red-500' : '');
@endphp

<div>
    @if ($label)
        <label for="{{ $id }}" class="hms-label">
            {{ $label }}@if ($required)<span class="ml-0.5 text-red-500">*</span>@endif
        </label>
    @endif

    @if ($prefix)
        <div class="flex rounded-lg shadow-sm">
            <span class="inline-flex items-center rounded-l-lg border border-r-0 border-slate-300 bg-slate-50 px-3 text-sm text-slate-500">{{ $prefix }}</span>
            <input id="{{ $id }}" name="{{ $name }}" type="{{ $type }}"
                   value="{{ old($name, $value) }}"
                   @if ($placeholder) placeholder="{{ $placeholder }}" @endif
                   @if ($required) required @endif
                   {{ $attributes->except(['id'])->merge(['class' => $inputClass.' rounded-l-none']) }}>
        </div>
    @else
        <input id="{{ $id }}" name="{{ $name }}" type="{{ $type }}"
               value="{{ old($name, $value) }}"
               @if ($placeholder) placeholder="{{ $placeholder }}" @endif
               @if ($required) required @endif
               {{ $attributes->except(['id'])->merge(['class' => $inputClass]) }}>
    @endif

    @if ($hint && ! $hasError)
        <p class="hms-hint">{{ $hint }}</p>
    @endif

    @error($name)
        <p class="hms-error">{{ $message }}</p>
    @enderror
</div>