@props([
    'label' => 'Email',
    'wireModel' => null,
    'required' => false,
    'hint' => 'Ejemplo: usuario@dominio.com',
    'placeholder' => 'email@ejemplo.com',
    'liveValidation' => true
])

@php
    $attributes = $attributes->merge([
        'type' => 'email',
        'icon' => 'o-envelope',
        'placeholder' => $placeholder,
        'hint' => $hint . ($required ? '' : ' (opcional)'),
    ]);
    
    if ($required) {
        $attributes = $attributes->merge(['required' => true]);
    }
@endphp

<x-input 
    :label="$label"
    {{ $attributes }}
    x-data=""
    x-on:input="
        {{ $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') . '})' : '' }}
    "
/>