<script setup>
import { computed } from 'vue';
const $props = defineProps({
    label: { type: String, default: null },
    value: {
        type: [String, Boolean],
        default: null,
    },
    info: { type: String, default: null },
});
const isBooleanValue = computed(() => typeof $props.value === 'boolean');
</script>
<template>
    <div class="vn-label-value">
        <div v-if="$props.label || $slots.label" class="label">
            <slot name="label"> {{ $props.label }}</slot>
        </div>
        <div v-if="$props.value || $slots.value" class="value">
            <span v-if="isBooleanValue">
                <QIcon
                    :name="$props.value ? `check` : `close`"
                    :color="$props.value ? `positive` : `negative`"
                />
            </span>
            <span v-else>
                <slot name="value">{{ $props.value }}</slot>
            </span>
        </div>
        <div class="info" v-if="$props.info">
            <QIcon name="info">
                <QTooltip class="bg-dark text-white shadow-4" :offset="[10, 10]">
                    {{ $props.info }}
                </QTooltip>
            </QIcon>
        </div>
    </div>
</template>
