<script setup lang="ts">
withDefaults(defineProps<{
  title: string
  breadcrumb?: string
  description?: string
  status?: string
  dirty?: boolean
}>(), { breadcrumb:'', description:'', status:'', dirty:false })
</script>

<template>
  <header class="kbx-page-header">
    <div class="kbx-page-header__identity">
      <div v-if="breadcrumb" class="kbx-page-header__breadcrumb">{{ breadcrumb }}</div>
      <div class="kbx-page-header__title-row">
        <h1>{{ title }}</h1>
        <span v-if="status" class="kbx-page-header__status">{{ status }}</span>
        <span v-if="dirty" class="kbx-page-header__dirty">변경됨</span>
      </div>
      <p v-if="description">{{ description }}</p>
    </div>
    <div class="kbx-page-header__utility"><slot name="utility" /></div>
  </header>
</template>

<style scoped>
.kbx-page-header {
  min-height:var(--kbx-page-header-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--kbx-space-4);
  padding:var(--kbx-space-1) var(--kbx-screen-inline-padding);
  border-bottom:var(--kbx-border-width) solid var(--kbx-color-border);
  background:var(--kbx-color-surface);
}
.kbx-page-header__identity { min-width:0; }
.kbx-page-header__title-row { display:flex; align-items:center; gap:var(--kbx-space-2); min-width:0; }
h1 { font-size:var(--kbx-font-2xl); font-weight:600; margin:0; line-height:1.3; }
.kbx-page-header__breadcrumb, p { font-size:var(--kbx-font-xs); color:var(--kbx-color-text-muted); margin:0 0 var(--kbx-space-1); }
.kbx-page-header__status, .kbx-page-header__dirty { font-size:var(--kbx-font-xs); padding:var(--kbx-space-1) var(--kbx-space-2); border:var(--kbx-border-width) solid var(--kbx-color-border); border-radius:var(--kbx-radius-sm); white-space:nowrap; }
.kbx-page-header__status { background:var(--kbx-color-surface-muted); }
.kbx-page-header__dirty { color:var(--kbx-color-warning-text); border-color:var(--kbx-color-warning-border); background:var(--kbx-color-warning-surface); }
.kbx-page-header__utility { display:flex; align-items:center; gap:var(--kbx-space-1); flex-shrink:0; }
</style>
