<template>
  <add-alert v-if="valueName == 'add_alert'" />
  <auto-delete v-else-if="valueName == 'auto_delete'" />
  <error-outline v-else-if="valueName == 'error_outline'" />
  <error v-else-if="valueName == 'error'" />
  <notification-important v-else-if="valueName == 'notification_important'" />
  <warning-amber v-else-if="valueName == 'warning_amber'" />
  <warning v-else-if="valueName == 'warning'" />
</template>

<script>
import AddAlert from "@/components/Icons/Alert/AddAlert";
import AutoDelete from "@/components/Icons/Alert/AutoDelete";
import ErrorOutline from "@/components/Icons/Alert/ErrorOutline";
import Error from "@/components/Icons/Alert/Error";
import NotificationImportant from "@/components/Icons/Alert/NotificationImportant";
import WarningAmber from "@/components/Icons/Alert/WarningAmber";
import Warning from "@/components/Icons/Alert/Warning";

export default {
  components: {
    AddAlert,
    AutoDelete,
    ErrorOutline,
    Error,
    NotificationImportant,
    WarningAmber,
    Warning,
  },
  props: {
    valueName: {
      type: [String],
    },
  },
};
</script>
