<script setup>
import { computed } from "vue";
import { cn } from "../../../utils/cn";
const props = defineProps({
  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
  errors: { type: Array, required: false }
});
const content = computed(() => {
  if (!props.errors || props.errors.length === 0)
    return null;
  const unique = [
    ...new Map(
      props.errors.filter(Boolean).map((error) => {
        const message = typeof error === "string" ? error : error?.message;
        return [message, error];
      })
    ).values()
  ];
  if (unique.length === 1 && unique[0]) {
    return typeof unique[0] === "string" ? unique[0] : unique[0].message;
  }
  return unique.map((error) => typeof error === "string" ? error : error?.message);
});
</script>

<template>
  <div
    v-if="$slots.default || content"
    role="status"
    data-slot="field-warning"
    :class="cn('max-w-full pt-0.25 text-amber-600 text-xs leading-tight font-normal', props.class)"
  >
    <slot v-if="$slots.default" />

    <template v-else-if="typeof content === 'string'">
      {{ content }}
    </template>

    <ul
      v-else-if="Array.isArray(content)"
      class="ml-3 flex list-disc flex-col gap-0.5"
    >
      <li
        v-for="(warning, index) in content"
        :key="index"
      >
        {{ warning }}
      </li>
    </ul>
  </div>
</template>
