<script setup>
import {computed} from "vue";
import {NText, NSkeleton} from 'naive-ui'
import {useReportStore} from "../../../Stores/report.js";

const props = defineProps({
    title: {
        type: String,
        default: null
    },
    status: {
        type: String,
        default: null
    }
})

const reportStore = useReportStore()

const computedHeader = computed(() => {
    return `${props.title} (${reportStore.getPatientsCount(props.status)})`
})
</script>

<template>
    <NText>
        <template v-if="reportStore.countsLoading">
            {{ title }}
            <NSkeleton text style="width: 24px; display: inline-block; margin-left: 6px;" />
        </template>
        <template v-else>
            {{ computedHeader }}
        </template>
    </NText>
</template>

<style scoped>

</style>
