<script setup lang="ts">
import type { BreadcrumbItem } from '@/types';

const props = withDefaults(defineProps<{
  breadcrumbs?: BreadcrumbItem[];
}>(), {
  breadcrumbs: () => [],
});
</script>

<template>
  <div class="w-full border-b bg-background/50">
    <div class="container mx-auto flex h-12 items-center px-4">
      <nav v-if="props.breadcrumbs?.length" class="flex items-center gap-2 text-sm text-muted-foreground">
        <template v-for="(item, idx) in props.breadcrumbs" :key="idx">
          <a v-if="item.href" :href="item.href" class="hover:underline">{{ item.title }}</a>
          <span v-else>{{ item.title }}</span>
          <span v-if="idx < (props.breadcrumbs!.length - 1)" aria-hidden="true">/</span>
        </template>
      </nav>
      <slot name="actions" />
    </div>
  </div>
</template>
