<script setup>
const props = defineProps({
  number: {
    type: [String, Number],
    default: ""
  },
  label: {
    type: String,
    default: ""
  },
  size: {
    type: String,
    default: "xs"
  },
  variant: {
    type: String,
    default: "soft"
  }
})

const router = useRouter()

const normalizedNumber = computed(() => String(props.number || "").trim())
const displayLabel = computed(() => props.label || normalizedNumber.value)
const canCall = computed(() => normalizedNumber.value.length > 0)

const openSoftphone = async () => {
  if (!canCall.value) return

  await router.push({
    path: "/communication/phone",
    query: {
      call: normalizedNumber.value,
      name: props.label || undefined
    }
  })
}
</script>

<template>
  <UButton
    icon="i-heroicons-phone"
    color="primary"
    :size="size"
    :variant="variant"
    :disabled="!canCall"
    @click="openSoftphone"
  >
    {{ displayLabel }}
  </UButton>
</template>
