<script lang="ts">
	import type { Snippet } from 'svelte';
	import { cn } from '$lib/utils';

	type Variant = 'default' | 'secondary' | 'outline' | 'destructive';

	interface Props {
		variant?: Variant;
		class?: string;
		children?: Snippet;
	}

	let { variant = 'default', class: className = '', children }: Props = $props();

	const base =
		'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none';

	const variants: Record<Variant, string> = {
		default:     'border-transparent bg-(--color-brand) text-(--color-surface)',
		secondary:   'border-transparent bg-(--color-surface-3) text-(--color-text)',
		outline:     'border-(--color-border) text-(--color-muted)',
		destructive: 'border-transparent bg-(--color-danger)/20 text-(--color-danger)',
	};
</script>

<span class={cn(base, variants[variant], className)}>
	{@render children?.()}
</span>
