@props([
    'countryCodeName' => 'country_code',
    'phoneName' => 'phone',
    'countryCodeValue' => config('phone.default_country_code'),
    'phoneValue' => '',
    'placeholder' => '6 XX XX XX XX',
    'required' => true,
    'countryCodeId' => 'country_code',
    'phoneId' => 'phone',
    'disabled' => false,
])

@php
    $supportedCodes = config('phone.supported_country_codes', []);
    $countryFlags = [
        '+237' => '🇨🇲',
        '+221' => '🇸🇳',
        '+225' => '🇨🇮',
        '+226' => '🇧🇫',
        '+229' => '🇧🇯',
        '+228' => '🇹🇬',
        '+243' => '🇨🇩',
        '+242' => '🇨🇬',
        '+241' => '🇬🇦',
        '+235' => '🇹🇩',
        '+33' => '🇫🇷',
    ];
@endphp

<div class="input-group">
    <select class="form-select" name="{{ $countryCodeName }}" id="{{ $countryCodeId }}" {{ $required ? 'required' : '' }} {{ $disabled ? 'disabled' : '' }} style="max-width: 140px;">
        @foreach($supportedCodes as $code => $countryName)
            <option value="{{ $code }}" {{ $countryCodeValue == $code ? 'selected' : '' }}>
                {{ $countryFlags[$code] ?? '' }} {{ $code }}
            </option>
        @endforeach
    </select>
    <input
        type="tel"
        class="form-control @error($phoneName) is-invalid @enderror"
        {{ $attributes->whereStartsWith('wire:model') }}
        name="{{ $phoneName }}"
        id="{{ $phoneId }}"
        value="{{ $phoneValue }}"
        placeholder="{{ $placeholder }}"
        {{ $required ? 'required' : '' }}
        {{ $disabled ? 'disabled' : '' }}
        style="padding-left: 1rem;">
</div>