<script setup lang="ts">
export interface ValidationSummaryError { readonly field?: string; readonly message: string }
defineProps<{ errors: readonly ValidationSummaryError[]; title?: string }>()
</script>

<template>
  <section v-if="errors.length" class="ks-validation-summary" role="alert" aria-live="assertive">
    <strong>{{ title ?? `저장할 수 없습니다. ${errors.length}개 항목을 확인하세요.` }}</strong>
    <ul><li v-for="(error, index) in errors" :key="`${error.field ?? 'form'}-${index}`">{{ error.message }}</li></ul>
  </section>
</template>

<style scoped>
.ks-validation-summary { border: 1px solid var(--ks-color-danger); background: color-mix(in srgb, var(--ks-color-danger) 8%, var(--ks-color-surface)); padding: var(--ks-space-2) var(--ks-space-3); border-radius: var(--ks-radius-sm); color: var(--ks-color-neutral-950); }
strong { color: var(--ks-color-danger); } ul { margin: var(--ks-space-2) 0 0 var(--ks-space-6); padding: 0; }
</style>
