<script setup>
import HeaderWidget from "../HeaderWidget.vue"
import {computed} from "vue";
const props = defineProps({
    counter: Number
})

const counterClass = computed(() => {
    const value = typeof props.counter === 'number' ? props.counter : 0

    if (value < 60) return 'counter-success'
    if (value < 100) return 'counter-warning'
    return 'counter-danger'
})
</script>

<template>
    <HeaderWidget label="Загруженность"
                  :counter="counter"
                  :counter-class="counterClass"
                  percent
    />
</template>

<style scoped>
:deep(.counter-success) {
    color: var(--n-color-target) !important;
}

:deep(.counter-warning) {
    color: var(--n-feedback-text-color-warning) !important;
}

:deep(.counter-danger) {
    color: var(--n-asterisk-color) !important;
}
</style>
