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

@php
    $wireModelKey = collect($attributes->getAttributes())->keys()->first(fn ($key) => str_starts_with((string) $key, 'wire:model'));
    $wireModelValue = $wireModelKey ? $attributes->get($wireModelKey) : null;
    $fieldName = $name ?? $wireModelValue;
    $hasError = $fieldName && $errors->has($fieldName);
    $inputId = 'field-'.str_replace(['.', '[', ']'], '-', $name ?? $wireModelValue ?? uniqid());
@endphp

<div @if ($viewable || $icon) x-data="{ show: false }" @endif class="grid gap-1.5">
    @if ($label)
        <label for="{{ $inputId }}" class="text-sm font-medium text-stone-700 dark:text-stone-300">
            {{ $label }}
        </label>
    @endif

    <div class="relative">
        @if ($icon)
            <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-stone-400">
                <x-icon :name="$icon" class="size-4" />
            </span>
        @endif

        <input
            id="{{ $inputId }}"
            @if ($name) name="{{ $name }}" @endif
            @if ($viewable)
                x-bind:type="show ? 'text' : 'password'"
            @else
                type="{{ $type }}"
            @endif
            {{ $attributes->except(['label', 'name', 'type'])->class([
                'block w-full rounded-lg border bg-white px-3.5 py-2.5 text-sm text-stone-900 placeholder:text-stone-400 shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-offset-0 dark:bg-stone-900 dark:text-stone-100 dark:placeholder:text-stone-500',
                'pl-10' => $icon,
                'pr-10' => $viewable,
                'border-red-400 focus:border-red-500 focus:ring-red-500/30 dark:border-red-500/60' => $hasError,
                'border-stone-300 focus:border-brand-500 focus:ring-brand-500/20 dark:border-stone-700 dark:focus:border-brand-400 dark:focus:ring-brand-400/20' => ! $hasError,
            ]) }}
        />

        @if ($viewable)
            <button
                type="button"
                x-on:click="show = !show"
                class="absolute inset-y-0 right-0 flex items-center pr-3 text-stone-400 hover:text-stone-600 dark:hover:text-stone-300"
                tabindex="-1"
            >
                <x-icon x-show="!show" name="eye" class="size-4" />
                <x-icon x-show="show" name="eye-slash" class="size-4" x-cloak />
            </button>
        @endif
    </div>

    @if ($hasError)
        <p class="text-xs font-medium text-red-600 dark:text-red-400">{{ $errors->first($fieldName) }}</p>
    @endif
</div>