<script setup>
defineProps({
  modelValue: String,
  alert: Object
})

const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <div v-if="modelValue" class="mb-3">
    <div class="alert" :class="Number(alert.status) >= 400 ? 'alertError' : 'alertSuccess'">
      <div class="alertContent">
        <h3 class="alertTitle">{{ alert.status }}</h3>
        <p class="alertText">{{ alert.message }}</p>
      </div>
      <div class="alertAction" @click="emit('update:modelValue', '')"><i class="menu-icon tf-icons ti ti-x"></i></div>
    </div>
  </div>
</template>