<template>
	<span :class="['simplestats-delta-tag', `simplestats-delta-tag--${variant}`]">
		<span v-if="variant === 'up'"   class="simplestats-delta-tag__icon" v-html="upSvg" />
		<span v-if="variant === 'down'" class="simplestats-delta-tag__icon" v-html="downSvg" />
		<span class="simplestats-delta-tag__value">{{ formatted }}</span>
	</span>
</template>

<script setup>
	import { computed } from 'vue';
	import upSvg   from '@/images/icons/delta-up.svg?raw';
	import downSvg from '@/images/icons/delta-down.svg?raw';

	const props = defineProps( {
		value: { type: [ Number, null ], default: 0 },
	} );

	// `null` is the SaaS divide-by-zero sentinel (previous period had 0).
	const normalised = computed( () => props.value === null ? 100 : Number( props.value ) || 0 );

	const variant = computed( () => {
		if ( normalised.value > 0 ) return 'up';
		if ( normalised.value < 0 ) return 'down';
		return 'zero';
	} );

	const formatted = computed( () => {
		const v = normalised.value;
		if ( v === 0 ) return '0%';
		const sign = v > 0 ? '+' : '-';
		const abs  = Math.abs( v );
		// Drop trailing ".0" so integers render as "100%" not "100.0%".
		const num  = Number.isInteger( abs ) ? String( abs ) : abs.toFixed( 1 );
		return `${ sign }${ num }%`;
	} );
</script>
