<script module lang="ts">
	import { tv, type VariantProps } from "tailwind-variants";

	export const diffStatPill = tv({
		slots: {
			root: "flex items-center overflow-clip rounded-md",
			insertions: "text-foreground-success select-none",
			deletions: "text-foreground-danger select-none"
		},
		variants: {
			variant: {
				flat: {
					insertions: "p-3xs",
					deletions: "p-3xs"
				},
				background: {
					insertions: "bg-background-success-subtle px-2xs py-3xs",
					deletions: "bg-background-danger-subtle px-2xs py-3xs"
				}
			},
			size: {
				small: { root: "typography-monospace-small" },
				regular: { root: "typography-monospace-regular" }
			}
		},
		defaultVariants: {
			variant: "background",
			size: "regular"
		}
	});

	export type DiffStatPillVariants = VariantProps<typeof diffStatPill>;
</script>

<script lang="ts">
	import type { LineStat } from "#lib/api/diff.ts";

	interface Props {
		stat: LineStat;
		class?: string;
		size?: DiffStatPillVariants["size"];
		variant?: DiffStatPillVariants["variant"];
	}

	let { stat, class: className = "", size, variant }: Props = $props();

	const style = $derived(diffStatPill({ variant, size }));
</script>

{#if stat.insertions > 0 || stat.deletions > 0}
	<div class={style.root({ class: className })}>
		{#if stat.insertions > 0}
			<span class={style.insertions()}>
				+{stat.insertions}
			</span>
		{/if}
		{#if stat.deletions > 0}
			<span class={style.deletions()}>
				-{stat.deletions}
			</span>
		{/if}
	</div>
{/if}