<template>
    <div class="phase" :class="{ ready: ready === true, unknown: ready === undefined }">
        <p v-if="ready === true">Ready</p>
        <p v-if="ready === false">Not Ready</p>
        <p v-if="ready === undefined">Unknown</p>
    </div>
</template>

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

<style scoped>
.phase {
    padding: 0.25rem;
    border-radius: 0.25rem;
    cursor: pointer;
    background-color: red;
}
.phase * {
    color: white;
}
.phase.ready {
    background-color: green;
}
.phase.unknown {
    background-color: rgb(0, 119, 119);
}
</style>