<template>
  <div class="spaced-center padding-m prompt" v-if="prompt" :class="prompt.type">
    <p>{{ prompt.text }}</p>
    <UiIcon class="pointer" @click="() => emit('close')">close</UiIcon>
  </div>
</template>

<script setup lang="ts">
import type { Prompt } from './Prompt';

defineProps<{
    prompt?: Prompt
}>();

const emit = defineEmits<{
    (e: 'close'): void
}>();
</script>

<style scoped>
.prompt {
  border-radius: 0.25rem;
  height: 2.5rem;
}
.error {
  background-color: rgb(218, 57, 57);
}
.success {
  background-color: rgb(43, 161, 49);
}
.prompt * {
    color: white;
}
</style>