@props([
    'name' => 'phone',
    'countryField' => 'phone_country',
    'id' => null,
    'labelledBy' => null,
    'required' => false,
    'defaultCountry' => 'ke',
    'syncCountry' => null,
])

@php
    $fieldId = $id ?? $name;
    $preferred = implode(',', config('countries.preferred', ['ke']));
@endphp

<div
    {{ $attributes->class(['intl-phone-field']) }}
    data-intl-phone-input
    data-default-country="{{ $defaultCountry }}"
    data-preferred-countries="{{ $preferred }}"
    @if ($syncCountry) data-sync-country="{{ $syncCountry }}" @endif
>
    <input
        type="tel"
        id="{{ $fieldId }}-tel"
        class="intl-phone-tel"
        autocomplete="tel"
        inputmode="tel"
        @if ($labelledBy) aria-labelledby="{{ $labelledBy }}" @endif
        @if ($required) data-required="true" @endif
    >
    <input type="hidden" name="{{ $name }}" value="" data-intl-phone-value @if ($required) required @endif>
    <input
        type="hidden"
        name="{{ $countryField }}"
        value="{{ $defaultCountry }}"
        data-intl-phone-country
    >
</div>