@props(['label', 'name','id', 'type'=>'text', 'value'=>'', 'placeholder'=>''])

@php
    $hasError = $errors->has($name);
@endphp

<div>
    @if(isset($label) && is_object($label))
        <label for="{{ $id ?? $name }}" {{ $label->attributes->merge(['class' => 'block text-sm/6 font-medium text-gray-900 dark:text-white']) }}>
            {{ $label }}
        </label>
    @else
        <label for="{{ $id ?? $name }}" class="block text-sm/6 font-medium text-gray-900 dark:text-white">
            {{ $label }}
        </label>
    @endif

    <div class="mt-1 grid grid-cols-1">
        <input
            id="{{ $id ?? $name }}"
            type="{{ $type }}"
            name="{{ $name }}"
            value="{{ old($name, $value) }}"
            placeholder="{{ $placeholder }}"
            @if($hasError) aria-invalid="true" aria-describedby="{{ $id ?? $name }}-error" @endif
            {{ $attributes->class([
                'block w-full rounded-md bg-white py-1.5 outline-1 -outline-offset-1 focus:outline-2 focus:-outline-offset-2 sm:text-sm/6 dark:bg-white/5',
                'col-start-1 row-start-1 pr-10 pl-3 text-red-900 outline-red-300 placeholder:text-red-300 focus:outline-red-600 sm:pr-9 dark:text-red-400 dark:outline-red-500/50 dark:placeholder:text-red-400/70 dark:focus:outline-red-400' => $hasError,
                'px-3 text-base text-gray-900 outline-gray-300 placeholder:text-gray-400 focus:outline-brand-600 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-brand-500' => !$hasError,
            ]) }}
        />

        @if($hasError)
            <svg viewBox="0 0 16 16" fill="currentColor" data-slot="icon" aria-hidden="true"
                 class="pointer-events-none col-start-1 row-start-1 mr-3 size-5 self-center justify-self-end text-red-500 sm:size-4 dark:text-red-400">
                <path d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
                    clip-rule="evenodd" fill-rule="evenodd"/>
            </svg>
        @endif
    </div>

    @error($name)
        <p id="{{ $id ?? $name }}-error" class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
    @enderror
</div>