components/StatusBadge.jsx

import { clsx } from 'clsx';

const statusConfig = {
  running: { bg: 'bg-emerald-500/15', text: 'text-emerald-400', dot: 'bg-emerald-400' },
  active: { bg: 'bg-emerald-500/15', text: 'text-emerald-400', dot: 'bg-emerald-400' },
  available: { bg: 'bg-emerald-500/15', text: 'text-emerald-400', dot: 'bg-emerald-400' },
  idle: { bg: 'bg-amber-500/15', text: 'text-amber-400', dot: 'bg-amber-400' },
  standby: { bg: 'bg-slate-500/15', text: 'text-slate-400', dot: 'bg-slate-400' },
  degraded: { bg: 'bg-amber-500/15', text: 'text-amber-400', dot: 'bg-amber-400' },
  provisioning: { bg: 'bg-cyan-500/15', text: 'text-cyan-400', dot: 'bg-cyan-400' },
  stopped: { bg: 'bg-red-500/15', text: 'text-red-400', dot: 'bg-red-400' },
  queued: { bg: 'bg-purple-500/15', text: 'text-purple-400', dot: 'bg-purple-400' },
  waiting: { bg: 'bg-amber-500/15', text: 'text-amber-400', dot: 'bg-amber-400' },
  completed: { bg: 'bg-slate-500/15', text: 'text-slate-400', dot: 'bg-slate-400' },
};

export default function StatusBadge({ status, size = 'sm' }) {
  const config = statusConfig[status] || statusConfig.idle;
  const sizeClasses = size === 'sm' ? 'text-xs px-2 py-0.5' : 'text-sm px-3 py-1';
  const dotSize = size === 'sm' ? 'w-1.5 h-1.5' : 'w-2 h-2';

  return (
    <span className={clsx(
      'inline-flex items-center gap-1.5 rounded-full font-medium',
      config.bg, config.text, sizeClasses
    )}>
      <span className={clsx('rounded-full animate-pulse-slow', config.dot, dotSize)} />
      {status}
    </span>
  );
}