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

	export const issueStatePill = tv({
		base: "inline-flex items-center gap-1.5 rounded px-2 py-1 text-sm text-foreground-on-emphasis select-none",
		variants: {
			state: {
				open: "bg-background-success-emphasis",
				closed: "bg-background-neutral-emphasis"
			}
		},
		defaultVariants: {
			state: "open"
		}
	});

	export type IssueStatePillVariants = VariantProps<typeof issueStatePill>;
</script>

<script lang="ts">
	import CircleDot from "$icon/circle-dot";
	import Ban from "$icon/ban";

	interface Props {
		state: IssueStatePillVariants["state"];
		class?: string;
	}

	let { state = "open", class: className }: Props = $props();

	const Icon = $derived(state === "closed" ? Ban : CircleDot);
	const label = $derived(state === "closed" ? "Closed" : "Open");
</script>

<span class={issueStatePill({ state, class: className })}>
	<Icon class="size-3 shrink-0" aria-hidden="true" />
	<!--
		Inter's ascent/descent split isn't symmetric in the line box, so a mathematically
		centred label reads high. nudge the text alone (a transform, so the icon and the
		pill's height are untouched) to land it on the optical centre.
	-->
	<span class="translate-y-[1.5px]">{label}</span>
</span>
