<template>
    <div class="ratio center" :class="status.toLowerCase()" v-for="value in [(ratio * 100).toFixed(2)]">
        <p v-if="value === '100.00'">100%</p>
        <p v-else>{{ value }}%</p>
    </div>
</template>

<script setup lang="ts">
defineProps<{
    ratio: number,
    status: string
}>()
</script>

<style scoped>
.ratio {
    width: 4rem;
    border-radius: 1rem;
}
.ratio * {
    color: black;
    font-weight: 550;
}
.up {
    background-color: #74f474;
}
.up * {
    color: black;
}
.down {
    background-color: #ff4534;
}
.down * {
    color: white;
}
</style>