<script lang="ts">
  import type { Snippet } from "svelte";

  let {
    children,
    color,
    class: className = "",
  }: { children?: Snippet; color?: string; class?: string } = $props();

  function colorClasses(c?: string): string {
    switch (c) {
      case "green": return "bg-wald-50 text-wald-700 border border-wald-200";
      case "blue":  return "bg-himmel-50 text-himmel-700 border border-himmel-200";
      case "amber": return "bg-[#fdf8ec] text-[#a6780a] border border-[#f0d98a]";
      default:      return "bg-stein-100 text-stein-600 border border-stein-200";
    }
  }
</script>

<span class="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium {colorClasses(color)} {className}">
  {@render children?.()}
</span>
