@props([
    'label' => '',
    'name' => '',
    'required' => false,
    'value' => '',
])

<div class="mb-3 phone-input-wrapper" wire:ignore>
    @if($label)
        <label class="form-label d-block" for="{{ $name }}">
            {{ $label }}
            @if($required)
                <span class="text-danger">*</span>
            @endif
        </label>
    @endif

    <input
        type="tel"
        id="{{ $name }}"
        data-phone-input
        data-model="{{ $name }}"
        value="{{ $value }}"
        class="form-control @error($name) is-invalid @enderror"
        placeholder="{{ $label }}"
        @required($required)
    >
</div>

@error($name)
    <div class="invalid-feedback d-block">{{ $message }}</div>
@enderror