<script setup>
import { computed } from "vue";
import Message from "primevue/message";
import { resolveIcon } from "../../lib/icons";

const props = defineProps({
  severity: {
    type: String,
    default: "info",
    validator: (v) =>
      ["success", "info", "warn", "error", "secondary", "contrast"].includes(v),
  },
  closable: { type: Boolean, default: false },
  icon: { type: String, default: undefined },
  class: { type: [String, Object, Array], default: "" },
});

const emit = defineEmits(["close"]);
const resolvedIcon = computed(() =>
  props.icon ? resolveIcon(props.icon) : undefined,
);
</script>

<template>
  <Message
    :severity="severity"
    :closable="closable"
    :icon="resolvedIcon"
    :class="props['class']"
    v-bind="$attrs"
    @close="emit('close', $event)"
  >
    <slot />
  </Message>
</template>
