<script setup lang="ts">
import {inject} from 'vue';

const props = defineProps<{label: string; value: any; metricKey?: string; data?: any}>();
const openGraph = inject<(key: string, data: any) => void>('openGraph');
</script>

<style scoped lang="scss">
.row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 12px;
	font-size: 12px;
	border-radius: 6px;
	transition: background 0.15s;

	&.clickable {
		cursor: pointer;
		&:hover { background: var(--hover); }
	}

	.label { color: var(--text-muted); }
	.value { font-weight: 600; color: var(--text); }
}
</style>

<template>
	<div class="row" :class="{clickable: !!metricKey}" @click="metricKey && openGraph?.(metricKey, data)">
		<span class="label">{{ label }}</span>
		<span class="value">{{ value ?? '—' }}</span>
	</div>
</template>
