<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;
  min-height: 2.5rem;
}
.error {
  background-color: rgb(255, 74, 74);
}
.success {
  background-color: rgb(43, 161, 49);
}
.info {
  background-color: rgb(22, 79, 163);
}
.prompt * {
    color: rgb(255, 255, 255);
}
</style>