frontend/src/components/shared/StatusPill.jsx

import clsx from 'clsx';

const CONFIG = {
  ready: 'bg-emerald-500/12 text-emerald-300 border-emerald-500/25',
  active: 'bg-cyan-500/12 text-cyan-300 border-cyan-500/25',
  warning: 'bg-amber-500/12 text-amber-300 border-amber-500/25',
  error: 'bg-red-500/12 text-red-300 border-red-500/25',
  neutral: 'bg-slate-500/12 text-slate-300 border-slate-500/25',
};

export default function StatusPill({ tone = 'neutral', children, pulse = false }) {
  return (
    <span className={clsx('inline-flex items-center gap-2 rounded-full border px-2.5 py-1 text-xs font-medium', CONFIG[tone])}>
      {pulse && <span className="h-1.5 w-1.5 rounded-full bg-current pulse-dot" />}
      {children}
    </span>
  );
}