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

  interface Props {
    children: Snippet
    variant?: 'default' | 'green' | 'red' | 'blue' | 'yellow'
    class?: string
  }

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

  const variantClasses = {
    default: 'bg-gray-100 text-gray-800',
    green: 'bg-green-100 text-green-800',
    red: 'bg-red-100 text-red-800',
    blue: 'bg-blue-50 text-blue-700',
    yellow: 'bg-yellow-100 text-yellow-800',
  }
</script>

<span
  class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium {variantClasses[
    variant
  ]} {className}"
>
  {@render children()}
</span>
