import * as React from 'react';

export interface StatusBadgeProps {
  children: React.ReactNode;
  tone?: 'slate' | 'emerald' | 'amber' | 'rose' | 'sky';
}

const toneMap: Record<NonNullable<StatusBadgeProps['tone']>, string> = {
  slate: 'border-slate-200 bg-slate-100 text-slate-700',
  emerald: 'border-emerald-200 bg-emerald-100 text-emerald-700',
  amber: 'border-amber-200 bg-amber-100 text-amber-700',
  rose: 'border-rose-200 bg-rose-100 text-rose-700',
  sky: 'border-sky-200 bg-sky-100 text-sky-700',
};

export function StatusBadge({ children, tone = 'slate' }: StatusBadgeProps) {
  return (
    <span className={`inline-flex items-center rounded-full border px-3 py-1 text-[11px] font-bold uppercase tracking-[0.18em] ${toneMap[tone]}`}>
      {children}
    </span>
  );
}