<template>
  <div class="show" style="max-width: 500px;">
    <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 {
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #303030; /* Black background color */
  color: white; /* White text color */
  text-align: left; /* Centered text */
  border-radius: 6px; /* Rounded borders */
  padding: 10px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 999; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  top: 50px; /* 50px from the top */
  visibility: visible; /* Show the snackbar */
  /* 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>