<script lang="ts">
	interface Props {
		color?: 'emerald' | 'amber' | 'rose' | 'cyan' | 'accent' | 'dim';
		children: import('svelte').Snippet;
	}
	let { color = 'dim', children }: Props = $props();
</script>

<span class="badge badge-{color}">
	{@render children()}
</span>

<style>
	.badge {
		display: inline-flex;
		align-items: center;
		padding: 2px 8px;
		border-radius: 99px;
		font-size: var(--font-size-xs);
		font-weight: 500;
		font-family: var(--font-mono);
		letter-spacing: 0.02em;
	}
	.badge-emerald { background: var(--emerald-dim); color: var(--emerald); }
	.badge-amber { background: var(--amber-dim); color: var(--amber); }
	.badge-rose { background: var(--rose-dim); color: var(--rose); }
	.badge-cyan { background: var(--cyan-dim); color: var(--cyan); }
	.badge-accent { background: var(--accent-dim); color: var(--accent); }
	.badge-dim { background: var(--surface-3); color: var(--text-dim); }
</style>
