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

const truncatedHash = computed(() => {
  if (!props.txHash) return null
  if (props.txHash.length <= 20) return props.txHash
  return props.txHash.slice(0, 10) + '...' + props.txHash.slice(-6)
})
</script>

<template>
  <template v-if="txHash">
    <div class="inline-flex items-center gap-2">
      <div class="flex items-center gap-1.5">
        <UIcon name="i-lucide-link" class="text-sm text-gray-500" />
        <span class="font-mono text-xs text-gray-700 dark:text-gray-300">
          {{ truncatedHash }}
        </span>
      </div>
      <UBadge v-if="block" color="neutral" variant="subtle" size="xs">
        Bloc #{{ block.toLocaleString('fr-FR') }}
      </UBadge>
    </div>
  </template>
  <template v-else>
    <UBadge color="warning" variant="subtle" size="xs">
      Non ancre
    </UBadge>
  </template>
</template>
