<script lang="ts">
	export let title: string;
	export let value: number;
	export let precision = 0;
	export let unit = '';

	function format(value: number) {
		if (Number.isNaN(value) || !Number.isFinite(value)) {
			return 0;
		}

		if (Number.isInteger(value)) {
			return value;
		} else {
			return value.toFixed(precision);
		}
	}
</script>

<div class="flex flex-col">
	<h2 class="text-lg font-medium">
		{title}
	</h2>
	<span class="text-base font-medium">
		{format(value)}{unit}
	</span>
</div>