<script lang="ts" setup>
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbSeparator,
} from '~/components/pub/ui/breadcrumb'

const props = defineProps<{
  links: {
    title: string
    href: string
  }[]
}>()
</script>

<template>
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem v-for="(link, index) in props.links" :key="link.href">
        <BreadcrumbLink as-child>
          <NuxtLink :to="link.href">
            {{ link.title }}
          </NuxtLink>
        </BreadcrumbLink>

        <BreadcrumbSeparator v-if="index < props.links.length - 1" />
      </BreadcrumbItem>
    </BreadcrumbList>

  </Breadcrumb>
</template>
