<template>
  <div class="show">
    <component :is="dynamicComponent" v-bind="vbind" @close="$emit('close')"></component>
  </div>
</template>
<script setup>
import { defineAsyncComponent } from "vue";
import { useStore } from "@/stores/index";
const store = useStore();
var props = defineProps({
  component: String,
  width: Number,
  height: Number,
  vbind: Object,
  title: String,
});
const dynamicComponent = defineAsyncComponent(() => import(`~/components/snackbar/Info.vue`));
setTimeout(() => store.commit("snackbar", undefined), 3900);
</script>
<style>
.show {
  position: fixed;
  z-index: 999;
  top: 50px;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: fit-content;
  max-width: 500px;

  background-color: #303030;
  color: white;
  border-radius: 6px;
  padding: 10px;
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 3.5s;
  animation: fadein 0.5s, fadeout 0.5s 3.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {
    top: 0;
    opacity: 0;
  }
  to {
    top: 50px;
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    top: 0;
    opacity: 0;
  }
  to {
    top: 50px;
    opacity: 1;
  }
}

@-webkit-keyframes fadeout {
  from {
    top: 50px;
    opacity: 1;
  }
  to {
    top: 0;
    opacity: 0;
  }
}

@keyframes fadeout {
  from {
    top: 50px;
    opacity: 1;
  }
  to {
    top: 0;
    opacity: 0;
  }
}
</style>
