<template>
  <div class="container">
    <!-- eslint-disable max-len -->
    <div class="alert alert-success" v-if="type === 'SUCCESS'">
      <eva-icon name="checkmark-outline"></eva-icon>
      <strong>{{ text }}</strong>
    </div>
    <div class="alert alert-info" v-if="type === 'INFO'">
      <eva-icon name="info-outline"></eva-icon>
      <strong>{{ text }}</strong>
    </div>
    <div class="alert alert-warning" v-if="type === 'WARNING'">
      <eva-icon name="alert-circle-outline"></eva-icon>
      <strong class="color-black">{{ text }}</strong>
    </div>
    <div class="alert alert-danger" v-if="type === 'ERROR'">
      <eva-icon name="slash-outline"></eva-icon>
      <strong>{{ text }}</strong>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Alert',
  data() {
    return {
      alertTypes: {
        SUCCESS: 'Success',
        INFO: 'Info',
        WARNING: 'Warning',
        ERROR: 'Error',
      },
    };
  },
  props: {
    text: null,
    type: null,
  },
};
</script>

<style>
.color-black {
  color: black;
}
</style>
