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

	export const pullStatePill = tv({
		base: "inline-flex items-center gap-1 rounded-sm px-2 py-1 typography-paragraph-small text-foreground-on-emphasis select-none",
		variants: {
			state: {
				open: "bg-background-success-emphasis",
				// todo: the design system has no purple token yet, indigo is the
				// closest thing to the appview's purple "merged"
				merged: "bg-background-info-emphasis",
				closed: "bg-background-emphasis",
				abandoned: "bg-background-emphasis"
			}
		},
		defaultVariants: {
			state: "open"
		}
	});

	export type PullStatePillVariants = VariantProps<typeof pullStatePill>;
	export type PullState = NonNullable<PullStatePillVariants["state"]>;
</script>

<script lang="ts">
	import Ban from "$icon/ban";
	import GitMerge from "$icon/git-merge";
	import GitPullRequest from "$icon/git-pull-request";
	import GitPullRequestClosed from "$icon/git-pull-request-closed";

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

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

	const icons = {
		open: GitPullRequest,
		merged: GitMerge,
		closed: GitPullRequestClosed,
		abandoned: Ban
	};
	const labels = { open: "Open", merged: "Merged", closed: "Closed", abandoned: "Abandoned" };

	const Icon = $derived(icons[state ?? "open"]);
</script>

<span class={pullStatePill({ state, class: className })}>
	<Icon class="size-3 shrink-0" aria-hidden="true" />
	<span>{labels[state ?? "open"]}</span>
</span>
