<template>
    <div v-if="phase" class="phase" :class="phase.toLowerCase()">
        <p>{{ phase }}</p>
    </div>
</template>

<script setup lang="ts">
defineProps<{
    phase: string | undefined
}>();
</script>

<style scoped>
.phase {
    padding: 0.25rem;
    border-radius: 0.25rem;
}
.phase * {
    color: white;
}
.running, .succeeded {
    background-color: green;
}
.failed {
    background-color: crimson;
}
.pending {
    background-color: chocolate;
}
</style>