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

	export const tag = tv({
		base: "inline-flex items-center gap-1 rounded leading-none font-medium select-none",
		variants: {
			color: {
				default: "border border-border-default bg-background-default text-foreground-default",
				gray: "border border-transparent bg-background-inset text-foreground-muted",
				// status badges, per Figma's Tag usage on the settings screens
				success:
					"border border-transparent bg-background-success-subtle text-foreground-success-strong",
				warning: "border border-transparent bg-background-warning-subtle text-foreground-warning",
				info: "border border-transparent bg-background-info-subtle text-foreground-info-strong"
			},
			size: {
				/** the DS badge: 16px tall, mini type — what the settings screens use */
				sm: "px-1 typography-paragraph-mini",
				md: "px-1.5 py-0.5 typography-paragraph-small"
			}
		},
		defaultVariants: {
			color: "default",
			size: "md"
		}
	});

	export type TagVariants = VariantProps<typeof tag>;
</script>

<script lang="ts">
	import type { Component, Snippet } from "svelte";
	import type { SvelteHTMLElements } from "svelte/elements";
	import type { HTMLAttributes } from "svelte/elements";

	interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, "class" | "children"> {
		color?: TagVariants["color"];
		size?: TagVariants["size"];
		/** Optional leading icon component (e.g. `import Hash from "$icon/hash"`). */
		icon?: Component<SvelteHTMLElements["svg"]>;
		class?: string;
		children?: Snippet;
	}

	let {
		color = "default",
		size = "md",
		icon,
		class: className,
		children,
		...rest
	}: Props = $props();

	const classes = $derived(tag({ color, size, class: className }));
	const Icon = $derived(icon);
</script>

<span class={classes} {...rest}>
	{#if Icon}
		<Icon class="size-3" aria-hidden="true" />
	{/if}
	{#if children}
		{@render children()}
	{/if}
</span>
