<script setup lang="ts">
import MaterialSymbolsCloseSmallOutlineRounded from '~icons/material-symbols/close-small-outline-rounded'

defineProps<{ message: string }>()
defineEmits<{ close: [] }>()
</script>

<template>
  <div class="babylai:fixed babylai:bottom-16 babylai:right-4 babylai:z-50 babylai:flex babylai:flex-col babylai:items-end babylai:animate-[float_2s_infinite_ease-in-out]">
    <div class="babylai:bg-primary-500 babylai:text-white babylai:py-3 babylai:px-4 babylai:rounded-3xl babylai:shadow-lg babylai:mb-4 babylai:max-w-[200px] babylai:relative after:babylai:content-[''] after:babylai:absolute after:babylai:-bottom-[10px] after:babylai:right-5 after:babylai:w-0 after:babylai:h-0 after:babylai:border-l-[10px] after:babylai:border-r-[10px] after:babylai:border-t-[10px] after:babylai:border-l-transparent after:babylai:border-r-transparent after:babylai:border-t-primary-500">
      <p class="babylai:text-xs babylai:font-bold babylai:m-0">{{ message }}</p>
      <button
        class="babylai:absolute babylai:-top-2 babylai:-right-2 babylai:w-5 babylai:h-5 babylai:rounded-full babylai:bg-white babylai:border-none babylai:cursor-pointer babylai:flex babylai:items-center babylai:justify-center babylai:text-black-white-700 babylai:p-[3px] babylai:hover:bg-primary-400 babylai:hover:text-white babylai:shadow-md"
        @click="$emit('close')"
      >
        <MaterialSymbolsCloseSmallOutlineRounded class="babylai:w-8 babylai:h-8" />
        <span class="babylai:sr-only">Close</span>
      </button>
    </div>
  </div>
</template>
