import { cn } from '@/lib/utils';
import type { ReactNode } from 'react';

export type StatusPillTone = 'neutral' | 'success' | 'warning' | 'muted';

const TONE_CLASS: Record<StatusPillTone, string> = {
  neutral: 'bg-forest/10 text-forest',
  success: 'bg-forest text-bone',
  warning: 'bg-terracotta text-white',
  muted:   'bg-ink/10 text-ink/70',
};

export function StatusPill({ tone, children }: { tone: StatusPillTone; children: ReactNode }) {
  return (
    <span className={cn('inline-block rounded-full px-2 py-0.5 text-xs font-semibold', TONE_CLASS[tone])}>
      {children}
    </span>
  );
}