@props([
    'name' => null,
    'id' => null,
    'label' => null,
    'type' => 'text',
    'placeholder' => null,
    'value' => null,
    'required' => false,
    'disabled' => false,
    'readonly' => false,
    'helper' => null,
    'error' => null,
    'containerClass' => 'w-full',
    'inputClass' => '',
    'leftIcon' => null,
    'rightIcon' => null,
    'variant' => 'default', // Options: default, underlined, floating
])

@php
    $inputId = $id ?? $name ?? 'input-' . Str::random(6);
    
    // Define classes for different variants
    $variantClasses = [
        'default' => 'input',
        'underlined' => 'py-2 px-3 w-full border-0 border-b border-base-content/30 focus:border-primary focus:ring-0 bg-transparent rounded-none',
        'floating' => 'peer input pt-4',
    ];
    
    // Get the appropriate class for the selected variant
    $variantClass = $variantClasses[$variant] ?? $variantClasses['default'];
@endphp

<div class="{{ $containerClass }}">
    @if($label && $variant !== 'floating')
        <label class="label label-text mb-1" for="{{ $inputId }}">
            {{ $label }}
            @if($required)
                <span class="text-error ml-1">*</span>
            @endif
        </label>
    @endif

    <div class="relative">
        @if($leftIcon)
            <span class="icon-[tabler--{{ $leftIcon }}] size-5 text-base-content/60 absolute left-3 top-1/2 transform -translate-y-1/2 z-10"></span>
        @endif

        <input
            type="{{ $type }}"
            name="{{ $name }}"
            id="{{ $inputId }}"
            placeholder="{{ $variant === 'floating' ? ' ' : $placeholder }}"
            value="{{ $value }}"
            @if($required) required @endif
            @if($disabled) disabled @endif
            @if($readonly) readonly @endif
            {{ $attributes->merge(['class' => $variantClass . ' w-full ' . ($leftIcon ? 'pl-10 ' : '') . ($rightIcon ? 'pr-10 ' : '') . ($error ? ($variant === 'underlined' ? 'border-error' : 'input-error ') : '') . $inputClass]) }}
        />

        @if($rightIcon)
            <span class="icon-[tabler--{{ $rightIcon }}] size-5 text-base-content/60 absolute right-3 top-1/2 transform -translate-y-1/2"></span>
        @endif
        
        @if($variant === 'floating')
            <label for="{{ $inputId }}" class="absolute text-sm text-base-content/70 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] px-2 peer-focus:px-2 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto start-1 cursor-text peer-focus:text-primary">
                {{ $label }}
                @if($required)
                    <span class="text-error ml-1">*</span>
                @endif
            </label>
        @endif
    </div>

    @if($helper && !$error)
        <div class="text-xs text-base-content/70 mt-1">{{ $helper }}</div>
    @endif

    @if($error)
        <div class="text-xs text-error mt-1">{{ $error }}</div>
    @endif
</div>