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

import { useBreadcrumbStore } from "~/stores/breadcrumbs";
const breadcrumbStore = useBreadcrumbStore();
</script>

<template>
  <ClientOnly>
    <Breadcrumb>
      <BreadcrumbList>
        <template v-for="i in breadcrumbStore.items.length - 1" :key="i">
          <BreadcrumbItem class="hidden md:block">
            <BreadcrumbLink :href="breadcrumbStore.items[i - 1]?.to || ''">
              {{ breadcrumbStore.items[i - 1]?.label }}
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator class="hidden md:block" />
        </template>
        <BreadcrumbItem>
          <BreadcrumbPage>
            {{ breadcrumbStore.items[breadcrumbStore.items.length - 1]?.label }}
          </BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  </ClientOnly>
</template>
