<script setup>
import { computed } from 'vue';
import { dashIfEmpty } from 'src/filters';

const $props = defineProps({
    label: { type: String, default: null },
    value: {
        type: [String, Boolean],
        default: null,
    },
    info: { type: String, default: null },
    dash: { type: Boolean, default: true },
});
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">
                <span>{{ $props.label }}</span>
            </slot>
        </div>
        <div class="value">
            <span v-if="isBooleanValue">
                <QIcon
                    :name="$props.value ? `check` : `close`"
                    :color="$props.value ? `positive` : `negative`"
                    size="sm"
                />
            </span>
            <slot v-else name="value">
                <span :title="$props.value">
                    {{ $props.dash ? dashIfEmpty($props.value) : $props.value }}
                </span>
            </slot>
        </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>
