@props([
    'label' => 'Teléfono',
    'wireModel' => null,
    'required' => false,
    'hint' => 'Solo 9 dígitos numéricos, sin +56',
    'placeholder' => '987654321',
    'liveValidation' => true
])

@php
    // Si hint está vacío explícitamente (""), no mostrar nada
    if ($hint === '') {
        $finalHint = '';
    } elseif ($hint && !$required) {
        $finalHint = $hint . ' (opcional)';
    } elseif (!$hint && !$required) {
        $finalHint = 'Solo 9 dígitos numéricos, sin +56 (opcional)';
    } else {
        $finalHint = $hint;
    }
    
    $attributes = $attributes->merge([
        'icon' => 'o-phone',
        'placeholder' => $placeholder,
        'maxlength' => '9',
        'pattern' => '[0-9]{9}',
        'hint' => $finalHint,
        'type' => 'tel',
    ]);
    
    if ($required) {
        $attributes = $attributes->merge(['required' => true]);
    }
@endphp

<x-input 
    :label="$label"
    {{ $attributes }}
    x-data=""
    x-on:input="
        $el.value = $el.value.replace(/[^0-9]/g, '').slice(0, 9);
        {{ $wireModel ? '$wire.set(\'' . $wireModel . '\', $el.value)' : '' }}
        {{ $wireModel && $liveValidation ? '; $wire.validateField(\'' . $wireModel . '\', $el.value, {required: ' . ($required ? 'true' : 'false') . '})' : '' }}
    "
    x-on:blur="
        {{ $wireModel && $liveValidation ? '$wire.validateField(\'' . $wireModel . '\', $el.value, {required: ' . ($required ? 'true' : 'false') . '})' : '' }}
    "
/>