<script setup lang="ts">
defineProps<{
  title: string
  breadcrumb?: string
}>()
</script>

<template>
  <header class="topbar">
    <div>
      <h1 class="topbar-title">{{ title }}</h1>
      <p v-if="breadcrumb" class="topbar-breadcrumb">{{ breadcrumb }}</p>
    </div>
    <div class="topbar-actions">
      <slot name="actions" />
    </div>
  </header>
</template>

<style scoped>
.topbar {
  background: white;
  border-bottom: 1px solid #e2e8f0;
  padding: 13px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.topbar-title { font-size: 16px; font-weight: 700; color: #0f172a; }
.topbar-breadcrumb { font-size: 11px; color: #94a3b8; margin-top: 1px; }
.topbar-actions { display: flex; gap: 8px; align-items: center; }
</style>
