<script setup lang="ts">
defineProps<{
    icon?: object | Function;
    label: string;
    value?: string | number | null;
}>();
</script>

<template>
    <div class="flex items-center justify-between gap-3 text-sm">
        <span class="flex items-center gap-2 text-muted-foreground">
            <component :is="icon" v-if="icon" class="size-4 opacity-70" />
            {{ label }}
        </span>
        <span class="truncate text-right font-medium">
            <slot>{{ value ?? "—" }}</slot>
        </span>
    </div>
</template>
