/**
 * 状态标记 Badge。
 *
 * 报刊不用彩色药丸:小方块 + 文字,红=异常/失败,墨=正常,灰=中性。
 * 原位于 admin/components.tsx。
 */
import type { ReactNode } from 'react'

const MARK_STYLES: Record<string, { text: string; mark: string }> = {
  success: { text: 'text-ink-800', mark: 'bg-ink-900' },
  completed: { text: 'text-ink-800', mark: 'bg-ink-900' },
  win: { text: 'text-ink-800', mark: 'bg-ink-900' },
  ok: { text: 'text-ink-800', mark: 'bg-ink-900' },
  running: { text: 'text-ink-600', mark: 'bg-ink-400' },
  info: { text: 'text-ink-600', mark: 'bg-ink-400' },
  queued: { text: 'text-ink-500', mark: 'border border-ink-400' },
  pending: { text: 'text-ink-400', mark: 'bg-ink-300' },
  push: { text: 'text-ink-400', mark: 'bg-ink-300' },
  warning: { text: 'text-press', mark: 'border border-press' },
  failed: { text: 'text-press font-medium', mark: 'bg-press' },
  error: { text: 'text-press font-medium', mark: 'bg-press' },
  loss: { text: 'text-press font-medium', mark: 'bg-press' },
}

export function Badge({
  status,
  children,
}: {
  status: string
  children: ReactNode
}) {
  const s = MARK_STYLES[status] ?? MARK_STYLES.pending
  return (
    <span className={`inline-flex items-center gap-1.5 whitespace-nowrap text-2xs ${s.text}`}>
      <span className={`inline-block h-1.5 w-1.5 ${s.mark}`} aria-hidden="true" />
      {children}
    </span>
  )
}