import { Alert } from "@wrnexus/ui"

component ValidationSummary {
  props {
    errors: unknown[] = []
    title: string = "Please correct the following"
    color: string = "danger"
    size: string = "sm"
    class: string = ""
  }
  view {
    {#if errors.length > 0}
      <Alert {...attrs} title='{title}' icon="icon-[lucide--circle-alert]" color='{color}' size='{size}' variant="soft" class='{class}'>
        <ul class="m-0 mt-2 list-disc space-y-1 pl-5 text-sm">
          {#each errors as error}<li><a href='#{error.field}' class="underline underline-offset-2">{error.message}</a></li>{/each}
        </ul>
      </Alert>
    {/if}
  }
}