<script lang="ts">
	import type { DiffStat } from "$lib/api/diff";

	interface Props {
		stat: DiffStat;
		class?: string;
	}

	let { stat, class: className = "" }: Props = $props();
</script>

{#if stat.insertions > 0 || stat.deletions > 0}
	<div class="flex items-center font-mono typography-monospace-regular {className}">
		{#if stat.insertions > 0 && stat.deletions > 0}
			<span class="rounded-l bg-background-success-subtle p-1 text-foreground-success select-none">
				+{stat.insertions}
			</span>
			<span class="rounded-r bg-background-danger-subtle p-1 text-foreground-danger select-none">
				-{stat.deletions}
			</span>
		{:else if stat.insertions > 0}
			<span class="rounded bg-background-success-subtle p-1 text-foreground-success select-none">
				+{stat.insertions}
			</span>
		{:else}
			<span class="rounded bg-background-danger-subtle p-1 text-foreground-danger select-none">
				-{stat.deletions}
			</span>
		{/if}
	</div>
{/if}
