<script lang="ts">
  // 공용 status pill (TagPill과 별개 — TagPill은 도메인 prefix 코드,
  // Badge는 의미적 tone 표시).
  import type { Snippet } from 'svelte';

  type Tone = 'neutral' | 'success' | 'warning' | 'error' | 'accent';
  type Size = 'sm' | 'md';

  interface Props {
    tone?: Tone;
    size?: Size;
    children?: Snippet;
    class?: string;
  }

  let {
    tone = 'neutral',
    size = 'md',
    children,
    class: className = '',
    ...rest
  }: Props = $props();

  const toneClass: Record<Tone, string> = {
    neutral: 'bg-surface text-dim border border-default',
    success: 'bg-success/15 text-success border border-success/30',
    warning: 'bg-warning/15 text-warning border border-warning/30',
    error: 'bg-error/15 text-error border border-error/30',
    accent: 'bg-accent/15 text-accent border border-accent/30',
  };

  const sizeClass: Record<Size, string> = {
    sm: 'text-[10px] px-1.5 py-0.5',
    md: 'text-xs px-2 py-0.5',
  };

  let baseClass = $derived(
    [
      'inline-flex items-center gap-1 rounded font-medium',
      sizeClass[size],
      toneClass[tone],
      className,
    ].join(' ')
  );
</script>

<span class={baseClass} {...rest}>
  {@render children?.()}
</span>
