<script setup lang="ts">
const props = defineProps<{
  cid: string | null
}>()

const IPFS_GATEWAY = 'https://ipfs.io/ipfs/'

const truncatedCid = computed(() => {
  if (!props.cid) return null
  if (props.cid.length <= 20) return props.cid
  return props.cid.slice(0, 12) + '...' + props.cid.slice(-6)
})

const gatewayUrl = computed(() => {
  if (!props.cid) return null
  return `${IPFS_GATEWAY}${props.cid}`
})
</script>

<template>
  <template v-if="cid">
    <a
      :href="gatewayUrl!"
      target="_blank"
      rel="noopener noreferrer"
      class="inline-flex items-center gap-1.5 font-mono text-xs text-primary hover:underline"
    >
      <UIcon name="i-lucide-hard-drive" class="text-sm" />
      <span>{{ truncatedCid }}</span>
      <UIcon name="i-lucide-external-link" class="text-sm" />
    </a>
  </template>
  <template v-else>
    <UBadge color="neutral" variant="subtle" size="xs">
      Non disponible
    </UBadge>
  </template>
</template>
