<script setup lang="ts">
import { VAlert } from 'vuetify/components';
import { computed } from 'vue';
export type AlertData = Pick<InstanceType<typeof VAlert>["$props"],
  | "color"
  | "icon"
  | "text"
  | "title"
  | "type"
  | "closable"
  | "closeIcon"
>;

const props = defineProps<{
  alerts: Array<AlertData>;
}>();

// eslint-disable-next-line func-call-spacing
const emit = defineEmits<{
  (e: "update:alerts", value: typeof props.alerts): void,
}>();

const alerts = computed({
  get() { return props.alerts ?? []; },
  set(value: typeof props.alerts) { emit("update:alerts", value); },
});

</script>

<template>
  <VOverlay
    model-value
    :scrim="false"
    no-click-animation
    persistent
    class="alerts"
  >
    <VAlert
      v-for="i of alerts"
      :key="alerts.indexOf(i)"
      class="alert"
      :color=" i.color"
      model-value
      :icon="i.icon ?? false"
      :text="i.text"
      :title="i.title"
      :type="i.type ?? 'error'"
      :closable="i.closable ?? true"
      :close-icon="i.closeIcon ?? undefined"
    />
  </VOverlay>
</template>

<style scoped>
.alerts {
  flex-direction: column-reverse;
  align-items: center;
}

.alert {
  margin: 0.5em;
}
</style>