<!-- Special module scope required for exports -->
<script lang="ts">
import { RouteLocationRaw } from "vue-router"

type Breadcrumb = {
  title: string
  to: RouteLocationRaw
}

export { type Breadcrumb }
</script>

<script setup lang="ts">
const props = defineProps<{
  title: string
  breadcrumbs: Breadcrumb[]
}>()
</script>

<template>
  <div class="mt-3 mb-6">
    <div class="d-flex justify-space-between">
      <div class="d-flex py-0 align-center">
        <div>
          <h2 class="text-h3 mb-2">{{ props.title }}</h2>
          <v-breadcrumbs
            :items="props.breadcrumbs"
            class="text-h6 font-weight-regular pa-0 ml-n1"
          >
            <template
              v-if="props.breadcrumbs"
              #divider
            >
              <v-icon>mdi-chevron-right</v-icon>
            </template>
            <template #title="{ item }">
              <h6 class="text-medium-emphasis text-subtitle-1">{{ item.title }}</h6>
            </template>
          </v-breadcrumbs>
        </div>
      </div>
      <div class="d-flex align-center">
        <slot name="append" />
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.page-breadcrumb {
  .v-toolbar {
    background: transparent;
  }
}
</style>
