<template>
  <Transition
    enter-active-class="transition-height ease-out duration-500 origin-bottom overflow-hidden"
    enter-from-class="h-0"
    enter-to-class="h-10"
  >
    <div class="mb-4 rounded" v-if="message">
      <div
        class="rounded bg-red-100 px-4 py-2 text-center font-bold text-red-700"
        role="alert"
        aria-live="assertive"
      >
        {{ message }}
      </div>
    </div>
  </Transition>
</template>

<script setup lang="ts">
const props = defineProps<{
  message?: string;
}>();
</script>
