<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 uniqueErrors = [
    ...new Map(
      props.errors.filter(Boolean).map((error) => {
        const message = typeof error === "string" ? error : error?.message;
        return [message, error];
      })
    ).values()
  ];
  if (uniqueErrors.length === 1 && uniqueErrors[0]) {
    return typeof uniqueErrors[0] === "string" ? uniqueErrors[0] : uniqueErrors[0].message;
  }
  return uniqueErrors.map((error) => typeof error === "string" ? error : error?.message);
});
</script>

<template>
  <div
    v-if="$slots.default || content"
    role="alert"
    data-slot="field-error"
    :class="cn('max-w-full pt-0.25 text-red-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="(error, index) in content"
        :key="index"
      >
        {{ error }}
      </li>
    </ul>
  </div>
</template>
