<template>
	<div class="simplestats-kpi-bar">
		<KpiCard icon="visitors"  :label="text_visitors"  :value="kpis.visitors?.value || 0"    :delta="kpis.visitors?.delta_pct" />
		<KpiCard icon="pageviews" :label="text_pageviews" :value="kpis.pageviews?.value || 0"   :delta="kpis.pageviews?.delta_pct" />
		<KpiCard icon="bounce"    :label="text_bounce"    :value="kpis.bounce_rate?.value || 0" :delta="kpis.bounce_rate?.delta_pct" suffix="%" />
	</div>
</template>

<script setup>
	import { computed } from 'vue';
	import KpiCard from './KpiCard.vue';
	import { useStore } from '@/dashboard/store.js';

	const store = useStore();
	const kpis  = computed( () => store.report.data?.kpis || {} );

	const text_visitors  = wp.i18n.__( 'VISITORS',    'simplestats-friendly-website-analytics' );
	const text_pageviews = wp.i18n.__( 'PAGEVIEWS',   'simplestats-friendly-website-analytics' );
	const text_bounce    = wp.i18n.__( 'BOUNCE RATE', 'simplestats-friendly-website-analytics' );
</script>
