<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-erde-50 text-erde-700 border border-erde-200";
      default:      return "bg-stein-100 text-stein-600 border border-stein-200";
    }
  }
</script>

<span class="shrink-0 rounded-full px-1.5 py-0 text-[0.65rem] font-medium {colorClasses(color)} {className}">
  {@render children?.()}
</span>
