@props([
    'type' => 'text',
    'name',
    'id' => null,
    'label' => '',
    'required' => false,
    'value' => '',
    'autocomplete' => null,
    'icon' => null,
    'hasError' => false,
])

@php
    $id = $id ?? $name;
    $isPassword = $type === 'password';
@endphp

<div class="floating-group">
    <input 
        type="{{ $type }}" 
        name="{{ $name }}" 
        id="{{ $id }}" 
        placeholder=" " 
        @if($required) required @endif
        value="{{ $value }}"
        @if($autocomplete) autocomplete="{{ $autocomplete }}" @endif
        {{ $attributes->merge(['class' => 'floating-input' . ($hasError ? ' border-red-500 focus:border-red-500 focus:ring-red-500/20' : '')]) }}
        @if($hasError)
            aria-invalid="true"
            aria-describedby="login-errors"
        @endif
    />
    <label for="{{ $id }}" class="floating-label{{ $hasError ? ' text-red-500' : '' }}">
        {{ $label }}
        @if($required)
            <span class="text-red-500" aria-hidden="true">*</span>
        @endif
    </label>
    @if($icon)
        <span class="floating-icon{{ $hasError ? ' text-red-500' : '' }}">
            <x-icon :name="$icon" class="w-5 h-5" />
        </span>
    @endif

    @if($isPassword)
        <button 
            type="button" 
            class="absolute right-3 top-1/2 -translate-y-1/2 text-text-muted hover:text-text-medium focus:text-primary focus:outline-none focus:ring-2 focus:ring-primary/20 rounded p-1 transition-colors duration-200 cursor-pointer"
            onclick="togglePasswordVisibility('{{ $id }}', this)"
            aria-label="Show password"
        >
            <x-icon name="eye" class="w-5 h-5 eye-icon-open" />
            <x-icon name="eye-slash" class="w-5 h-5 eye-icon-closed hidden" />
        </button>
    @endif
</div>