<script lang="ts" setup>
import type { Component } from 'vue'

const props = defineProps({
  info: {
    type: String,
    required: true,
  },
  component: {
    type: [String, Object] as PropType<string | Component>,
    required: true,
  },
});

const isEmail = computed(() => props.info.includes("@"));
const isPhone = computed(() => /^[\d\s+\-()]+$/.test(props.info));
const link = computed(() => {
  if (isEmail.value) return `mailto:${props.info}`;
  if (isPhone.value) return `tel:${props.info.replace(/\s+/g, "")}`;
  return null;
});

</script>


<template>
  <div
    class="border-dark-text flex h-[53px] w-[380px] flex-row-reverse items-center justify-start gap-4 rounded-3xl border p-2 text-[#111928]"
  >
    <component :is="props.component" class="me-4" />

    <!-- If it's phone or email, wrap in a link -->
    <template v-if="link">
      <NuxtLink :to="link" target="_blank" rel="noopener noreferrer" class="hover:underline">
        {{ props.info }}
      </NuxtLink>
    </template>

    <!-- Otherwise, just show text -->
    <template v-else>
      <p>{{ props.info }}</p>
    </template>
  </div>
</template>
