<template>
	<div class="simplestats-kpi-card">
		<p class="simplestats-kpi-card__label">{{ label }}</p>
		<div class="simplestats-kpi-card__row">
			<span class="simplestats-kpi-card__icon-tile" v-html="iconSvg" />
			<div class="simplestats-kpi-card__body">
				<div class="simplestats-kpi-card__value-row">
					<span class="simplestats-kpi-card__value">{{ formattedValue }}</span>
					<DeltaTag :value="delta" />
				</div>
				<p class="simplestats-kpi-card__caption">{{ text_vs }}</p>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { computed } from 'vue';
	import DeltaTag from './atoms/DeltaTag.vue';
	import { useReportHelper } from '@/dashboard/helper.js';
	import visitorsSvg  from '@/images/icons/kpi-visitors.svg?raw';
	import pageviewsSvg from '@/images/icons/kpi-pageviews.svg?raw';
	import bounceSvg    from '@/images/icons/kpi-bounce.svg?raw';

	const props = defineProps( {
		icon:   { type: String,  required: true },
		label:  { type: String,  required: true },
		value:  { type: Number,  required: true },
		delta:  { type: [ Number, null ], default: 0 },
		suffix: { type: String,  default: '' },
	} );

	const text_vs = wp.i18n.__( 'vs previous period', 'simplestats-friendly-website-analytics' );

	const ICONS = {
		visitors:  visitorsSvg,
		pageviews: pageviewsSvg,
		bounce:    bounceSvg,
	};

	const iconSvg = computed( () => ICONS[ props.icon ] || '' );

	const { formatNumber } = useReportHelper();
	const formattedValue = computed( () => `${ formatNumber( props.value ) }${ props.suffix }` );
</script>
