<script lang="ts" setup>
import type { Crumb } from './types'
import { twMerge } from 'tailwind-merge'

defineProps<{
  links: Crumb[]
  customClasses?: string
}>()

const { t } = useI18n()
</script>
<template>
  <div class="">
    <ul
      class="flex gap-1"
      itemscope
      itemtype="https://schema.org/BreadcrumbList"
    >
      <li
        v-for="(breadcrumbItem, idx) in links"
        :key="idx"
        :class="
          twMerge(
            'flex items-center text-xs text-gray-500 underline-offset-2 last-of-type:text-deepblue-900 hover:underline dark:last-of-type:text-gray-200',
            customClasses
          )
        "
        itemprop="itemListElement"
        itemscope
        itemtype="https://schema.org/ListItem"
      >
        <meta
          itemprop="position"
          :content="`${idx}`"
        >
        <slot
          name="icon"
          :breadcrumb-item="breadcrumbItem"
          :index="idx"
        >
          <span v-if="idx !== 0">
            <a-icon-chevron-right />
          </span>
        </slot>
        <nuxt-link-locale
          v-if="breadcrumbItem.to"
          class="pl-1"
          :to="breadcrumbItem.to"
          rel="noopener noreferrer"
          itemprop="item"
        >
          <span itemprop="name">
            {{ t(breadcrumbItem.label) }}
          </span>
        </nuxt-link-locale>
        <span
          v-else
          class="pl-1"
          itemprop="name"
        >
          {{ t(breadcrumbItem.label) }}
        </span>
      </li>
    </ul>
  </div>
</template>
