<script setup>
import { computed } from 'vue'
import { RouterView, RouterLink, useRoute } from 'vue-router'

const route = useRoute()

const crumbs = computed(() => [
  { label: 'Haushalt', to: '/' },
  ...(route.meta.breadcrumb ?? []),
])
</script>

<template>
  <header class="breadcrumb-bar">
    <div class="container">
      <nav class="breadcrumb" aria-label="Breadcrumb">
        <template v-for="(crumb, i) in crumbs" :key="i">
          <span v-if="i > 0" class="sep">›</span>
          <RouterLink
            v-if="crumb.to && i < crumbs.length - 1"
            :to="crumb.to"
            class="crumb"
          >
            {{ crumb.label }}
          </RouterLink>
          <span v-else class="crumb current">{{ crumb.label }}</span>
        </template>
      </nav>
    </div>
  </header>
  <main class="main-area">
    <div class="container">
      <RouterView />
    </div>
  </main>
</template>

<style scoped>
.breadcrumb-bar {
  background: var(--breadcrumb-bg);
  border-bottom: 1px solid var(--border);
}

.breadcrumb-bar .container {
  display: flex;
  align-items: center;
  height: 3rem;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.9375rem;
}

.crumb {
  color: var(--text);
  text-decoration: none;
}

.crumb:hover {
  text-decoration: underline;
}

.crumb.current {
  font-weight: 600;
}

.sep {
  color: var(--text-muted);
  padding: 0 0.25rem;
}

.main-area .container {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
</style>
