<script setup lang="ts">
const { statusMessage, statusDescription, statusColor, clearStatus } = useStatus()

onMounted(() => {
  clearStatus()
})
watch(statusMessage, () => {
  setTimeout(() => {
    clearStatus()
  }, 6000)
})
</script>

<template>
  <div class="h-10 mb-1">
    <UAlert
      v-if="statusMessage"
      :title="statusMessage"
      :description="statusDescription"
      :color="statusColor"
      variant="soft"
      :ui="{
        root: 'p-3 max-w-xl'
      }"
    />
  </div>
</template>
