<script setup lang="ts">
const props = defineProps<{
  class?: string
  ux?: any
  name: string
}>()

if (!['location', 'phone', 'email'].includes(props.name)) {
  throw new Error(`${props.name} is not a valid name`)
}

const { g } = useContentInjected()

const data = computed(() => {
  let link
  if (props.name === 'location') {
    link = g.value?.business?.location?.link
  } else {
    const prefix = props.name === 'phone' ? 'tel:' : 'mailto:'
    link = prefix + g.value?.business?.[props.name].split(' ').join('')
  }

  return {
    icons: g.value?.contact?.icons?.[props.name],
    text:
      props.name === 'location'
        ? g.value?.business?.location?.address
        : g.value?.business?.[props.name],
    link: link,
  }
})

const classes = useStyling(
  'contactDetail',
  {
    slots: {
      base: '',
    },
  },
  props
)
</script>

<template>
  <XTextIcons
    :class="classes.base"
    :icons="data.icons"
    :text-props="{
      as: 'link',
      text: data.text,
      linkProps: { to: data.link, noRel: true, external: true },
    }"
  />
</template>
