const styles = {
  pass: 'border-emerald-400/30 bg-emerald-400/10 text-emerald-300 dot-emerald',
  validated: 'border-emerald-400/30 bg-emerald-400/10 text-emerald-300 dot-emerald',
  ready_for_export: 'border-emerald-400/30 bg-emerald-400/10 text-emerald-300 dot-emerald',
  connected: 'border-emerald-400/30 bg-emerald-400/10 text-emerald-300 dot-emerald',
  warning: 'border-amber-400/30 bg-amber-400/10 text-amber-200 dot-amber',
  fail: 'border-red-500/40 bg-red-500/10 text-red-300 dot-red',
  failed: 'border-red-500/40 bg-red-500/10 text-red-300 dot-red',
  processing: 'border-cyan-400/30 bg-cyan-400/10 text-cyan-200 dot-cyan',
  simulation_only: 'border-cyan-400/30 bg-cyan-400/10 text-cyan-200 dot-cyan',
  completed: 'border-cyan-400/30 bg-cyan-400/10 text-cyan-200 dot-cyan',
  queued: 'border-slate-600 bg-slate-800/60 text-slate-400 dot-slate',
  draft: 'border-slate-600 bg-slate-800/60 text-slate-400 dot-slate',
  not_checked: 'border-slate-600 bg-slate-800/60 text-slate-400 dot-slate',
  not_connected: 'border-slate-600 bg-slate-800/60 text-slate-400 dot-slate'
};
const dotColor = {
  'dot-emerald': 'bg-emerald-400', 'dot-amber': 'bg-amber-400', 'dot-red': 'bg-red-500',
  'dot-cyan': 'bg-cyan-400', 'dot-slate': 'bg-slate-600'
};

export default function StatusBadge({ status = 'not_checked' }) {
  const cls = styles[status] || styles.not_checked;
  const dotKey = cls.split(' ').find(c => c.startsWith('dot-'));
  const dot = dotColor[dotKey] || dotColor['dot-slate'];
  const badgeCls = cls.replace(/dot-\w+/, '').trim();
  return (
    <span className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] font-semibold capitalize ${badgeCls}`}>
      <span className={`h-1.5 w-1.5 rounded-full ${dot}`} />
      {(status || 'not checked').replaceAll('_', ' ')}
    </span>
  );
}