<script lang="ts">
	interface Props {
		title: string;
		value: number;
		precision?: number;
		unit?: string;
	}

	let { title, value, precision = 0, unit = '' }: Props = $props();

	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>