<template>
    <span style="align-items: center;"
          class="d-flex">
        <img :src="'/flags/' + value.countryCode.toUpperCase() + '.svg'"
             style="width: 32px; height: 32px"
             :alt="value.countryCode" />
        &nbsp;
        <span style="direction:ltr;">
            {{value.countryCode}}-{{value.phone}}
        </span>
    </span>
</template>

<script>
export default {
    props: {
        value: {
            default() {
                return {
                    phone: '',
                    countryCode: 'US'
                };
            }
        }
    }
}
</script>