const STATUSES = {
  running:    { dot: 'bg-emerald-400 animate-pulse', text: 'text-emerald-400', bg: 'bg-emerald-500/10 border-emerald-500/20' },
  exited:     { dot: 'bg-red-400',                   text: 'text-red-400',     bg: 'bg-red-500/10 border-red-500/20' },
  paused:     { dot: 'bg-yellow-400',                text: 'text-yellow-400',  bg: 'bg-yellow-500/10 border-yellow-500/20' },
  restarting: { dot: 'bg-blue-400 animate-pulse',    text: 'text-blue-400',    bg: 'bg-blue-500/10 border-blue-500/20' },
  dead:       { dot: 'bg-gray-500',                  text: 'text-gray-500',    bg: 'bg-gray-500/10 border-gray-500/20' },
}

export default function StatusBadge({ status }) {
  const s = STATUSES[status] ?? STATUSES.dead
  return (
    <span className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium border ${s.bg} ${s.text}`}>
      <span className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${s.dot}`} />
      {status}
    </span>
  )
}