<script setup lang="ts">
import type { KbxValidationError } from '@kbx/contracts'
defineProps<{ errors: KbxValidationError[] }>()
</script>
<template>
  <div v-if="errors.length" class="kbx-validation-summary" role="alert">
    <strong>저장할 수 없습니다. {{ errors.length }}개 항목을 확인하세요.</strong>
    <ul><li v-for="(error, i) in errors.slice(0,5)" :key="`${error.field}-${error.rowKey}-${i}`">{{ error.message }}</li></ul>
  </div>
</template>
<style scoped>
.kbx-validation-summary{border:var(--kbx-border-width) solid var(--kbx-color-danger-border);background:var(--kbx-color-danger-surface);padding:var(--kbx-space-2) var(--kbx-space-3);border-radius:var(--kbx-radius-sm);font-size:var(--kbx-font-sm);color:var(--kbx-color-text)}
.kbx-validation-summary strong{color:var(--kbx-color-danger)}.kbx-validation-summary ul{margin:var(--kbx-space-1) 0 0 var(--kbx-space-5);padding:0}
</style>
