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

<script setup lang="ts">
defineProps<{
    error?: string
}>();

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

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