<script setup lang="ts">
import type { AcfPhoneFragment } from "#graphql/operations";

defineProps<{
  phone?: AcfPhoneFragment;
  link?: boolean;
}>();
</script>

<template>
  <Component :is="link ? 'a' : 'span'" v-if="phone" :href="link ? `tel:${phone.e164}` : undefined">
    {{ phone.national }}{{ phone.extension ? ` ext. ${phone.extension}` : "" }}
  </Component>
</template>
