<script setup>
const props = defineProps({
  row: {
    type: Object,
    required: true,
    default: () => ({})
  },
  keyName: {
    type: String,
    default: ""
  }
})

const resolvedKey = computed(() => {
  if (props.keyName) return props.keyName
  if (typeof props.row?.supplier_link === "string") return "supplier_link"
  if (typeof props.row?.link === "string") return "link"
  if (typeof props.row?.url === "string") return "url"

  return null
})

const normalizedUrl = computed(() => {
  const rawValue = resolvedKey.value ? props.row?.[resolvedKey.value] : null

  if (!rawValue || typeof rawValue !== "string") return null

  const trimmedValue = rawValue.trim()
  if (!trimmedValue) return null

  if (/^https?:\/\//i.test(trimmedValue)) return trimmedValue

  return `https://${trimmedValue}`
})
</script>

<template>
  <a
    v-if="normalizedUrl"
    :href="normalizedUrl"
    target="_blank"
    rel="noopener noreferrer"
    class="text-primary hover:underline break-all"
  >
    {{ resolvedKey ? row[resolvedKey] : "" }}
  </a>
  <span v-else>-</span>
</template>
