<template>
  <div class="breadcrumbs text-sm">
    <ul>
      <li v-for="(crumb, index) in breadcrumbs" :key="index">
        <NuxtLink v-if="crumb.to" :to="crumb.to" class="hover:text-primary">
          {{ crumb.label }}
        </NuxtLink>
        <span v-else class="text-base-content">{{ crumb.label }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  supplierId?: string
  supplierName?: string
  productId?: string
  productName?: string
  hubId?: string
  hubName?: string
}>()

const localePath = useLocalePath()
const { t } = useI18n()

const breadcrumbs = computed(() => {
  const crumbs: Array<{ label: string; to?: string }> = []

  // Suppliers list
  crumbs.push({
    label: t('breadcrumbs.suppliers', 'Suppliers'),
    to: localePath('/catalog/suppliers')
  })

  // Supplier
  if (props.supplierId) {
    const hasNext = props.productId
    crumbs.push({
      label: props.supplierName || `#${props.supplierId.slice(0, 8)}...`,
      to: hasNext ? localePath(`/catalog/suppliers/${props.supplierId}`) : undefined
    })
  }

  // Product
  if (props.productId) {
    const hasNext = props.hubId
    crumbs.push({
      label: props.productName || `#${props.productId.slice(0, 8)}...`,
      to: hasNext ? localePath(`/catalog/suppliers/${props.supplierId}/${props.productId}`) : undefined
    })
  }

  // Hub
  if (props.hubId) {
    crumbs.push({
      label: props.hubName || `#${props.hubId.slice(0, 8)}...`
    })
  }

  return crumbs
})
</script>
