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

	export const tag = tv({
		base: "inline-flex items-center gap-1 rounded px-1.5 py-0.5 typography-paragraph-small 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"
			}
		},
		defaultVariants: {
			color: "default"
		}
	});

	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"];
		/** Optional leading icon component (e.g. `import Hash from "$icon/hash"`). */
		icon?: Component<SvelteHTMLElements["svg"]>;
		class?: string;
		children?: Snippet;
	}

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

	const classes = $derived(tag({ color, 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>
