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

<template>
  <header class="kbx-page-header">
    <div class="kbx-page-header__identity">
      <span v-if="module" class="kbx-page-header__module">{{ module==='COMMON'?'공통':module }}</span>
      <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-shell-chrome);
  box-shadow:var(--kbx-shadow-shell);
  border-left:var(--kbx-accent-border-width) solid var(--kbx-color-module-accent);
}
.kbx-page-header__identity { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:var(--kbx-space-2); }
.kbx-page-header__module{grid-row:1 / span 3;align-self:stretch;display:flex;align-items:center;padding:0 var(--kbx-space-2);border:var(--kbx-border-width) solid var(--kbx-color-module-accent-border);border-radius:var(--kbx-radius-sm);background:var(--kbx-color-module-accent-surface);color:var(--kbx-color-module-accent);font-size:var(--kbx-font-xs);font-weight:700;letter-spacing:.02em}.kbx-page-header__breadcrumb,.kbx-page-header__title-row,.kbx-page-header__identity>p{grid-column:2}
.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>
