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