<script setup lang="ts">
import type { KbxRuntimeNotice } from '@kbx/contracts'
import KbxButton from './KbxButton.vue'

defineProps<{ notice: KbxRuntimeNotice | null }>()
const emit = defineEmits<{ retry: [] }>()
</script>

<template>
  <aside
    v-if="notice && notice.mode !== 'normal'"
    class="kbx-runtime-banner"
    :class="`is-${notice.mode}`"
    role="status"
    aria-live="polite"
  >
    <div class="copy">
      <strong>{{ notice.title }}</strong>
      <span v-if="notice.message">{{ notice.message }}</span>
      <small v-if="notice.correlationId">참조번호 {{ notice.correlationId }}</small>
    </div>
    <KbxButton v-if="notice.retryAllowed" label="다시 시도" variant="secondary" @click="emit('retry')" />
  </aside>
</template>

<style scoped>
.kbx-runtime-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:8px 12px; border:1px solid var(--kbx-color-border); border-radius:var(--kbx-radius-sm); background:var(--kbx-color-surface-muted); }
.copy { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; }
.copy span,.copy small { color:var(--kbx-color-text-muted); }
.is-degraded,.is-offline { border-color:var(--kbx-color-warning); }
.is-read-only { border-color:var(--kbx-color-danger); }
</style>
