<template>
  <v-col v-if="alertMessage" cols="12" mt-1 mb-2>
    <template v-if="redAlert">
      <v-alert
        ref="alertBox"
        data-cy="alertbox"
        v-show="alertMessage"
        color="error"
        type="error"
        icon="$ayiExclamationTriangle"
        class="multi-line"
        outlined
        >{{ alertMessage }}</v-alert
      ></template
    >
    <template v-else>
      <v-alert
        ref="alertBox"
        data-cy="alertbox"
        v-show="alertMessage"
        color="primary"
        icon="$ayiInfoCircle"
        class="multi-line"
        outlined
        >{{ alertMessage }}</v-alert
      ></template
    >
  </v-col>
</template>
<script>
export default {
  data: () => ({}),
  props: {
    alertMessage: { type: String, default: null },
    redAlert: { type: Boolean, default: false }
  }
};
</script>
