<template>
  <div :class="['toast-wrapper', look, { display: text.length }]">
    <button class="button-close" @click="$emit('trigger')">
      <i class="bi bi-x"></i>
    </button>
    <i v-if="look === 'error'" class="bi bi-exclamation-triangle"></i>
    <i v-else class="bi bi-check-circle"></i>
    <p v-if="text.length" class="toast-text">
      {{ text }}
    </p>
  </div>
</template>

<script lang="ts" setup>
defineProps({
  text: { type: String, default: '' },
  look: {
    type: String,
    validator: (value: string): boolean =>
      ['success', 'error', ''].includes(value),
    default: ''
  }
})
</script>

<style lang="scss" scoped>
.toast-wrapper {
  position: fixed;
  right: 0;
  bottom: toRem(2);
  transform: translateX(100%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white);
  @include text(s-regular);
  border-radius: toRem(0.5);
  height: toRem(4);
  min-width: toRem(10);
  padding-right: toRem(1);
  padding-left: toRem(1);
}
.button-close {
  position: absolute;
  top: toRem(-0.5);
  right: toRem(-0.5);
  height: toRem(1.8);
  width: toRem(1.8);
  border: toRem(0.1) solid var(--black);
  background-color: var(--white);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.toast-text {
  margin-bottom: 0;
  margin-left: toRem(1);
}
.display {
  transform: translateX(toRem(-3));
  transition: transform 0.3s ease-in-out;
}
.error {
  background-color: var(--red);
}
.success {
  background-color: var(--green);
}
</style>
