<script setup lang="ts">
import { ref, watch } from 'vue'

interface Props {
  isOpen: boolean
  contentText: string
}

const props = withDefaults(defineProps<Props>(), {
  isOpen: false,
})

const emit = defineEmits(['close'])

const isVisible = ref(false)

watch(
  () => props.isOpen,
  newVal => {
    if (newVal) {
      isVisible.value = true

      setTimeout(() => {
        isVisible.value = false
        emit('close')
      }, 2000)
    }
  }
)
</script>

<template>
  <Transition name="fade">
    <div v-if="isVisible" class="toast-container">
      <p class="toast-text">
        {{ contentText }}
      </p>
    </div>
  </Transition>
</template>

<style scoped>
.toast-container {
  @apply fixed left-1/2 max-w-[328px] py-3 px-6 rounded-[8px] bg-[rgba(85,85,85,0.4)] backdrop-blur-[25px] -translate-x-1/2 bottom-[20px] md:bottom-[40px] z-[800]
  before:content-[''] before:absolute before:inset-0 before:border before:border-white/10 before:rounded-[8px];
}
.toast-text {
  @apply text-center text-[16px] text-white leading-[26px] tracking-[-0.48px];
}
</style>
