// src/v2/components/ui/StatusBadge.jsx
// Pill-shaped "glowing ink" status indicator.
// Never use raw <span> tags for status values — always use StatusBadge.
//
// Props:
//   variant — 'success'|'warning'|'danger'|'info'|'primary'|'neutral'  (default: 'neutral')
//   dot     — boolean — show a small leading dot                         (default: true)
//   label   — string  — text content (falls back to children)
//   children— ReactNode — alternative to label
//   size    — 'sm' | 'md'                                                (default: 'md')
//   className — extra classes
//
// Preset status → variant mappings are exported for convenience.
// Styles live in src/v2/styles/components.css (.badge-*)

// Map common status strings to variants. Pages can import this to avoid
// duplicating the mapping logic.
export const STATUS_VARIANT = {
  // Device / operational
  online:       'success',
  active:       'success',
  connected:    'success',
  sold:         'success',
  claimed:      'success',
  provisioned:  'success',
  flashed:      'info',
  manufactured: 'info',
  pending:      'warning',
  warning:      'warning',
  maintenance:  'warning',
  offline:      'danger',
  error:        'danger',
  inactive:     'danger',
  deleted:      'danger',
  // CRM / order
  open:         'primary',
  draft:        'neutral',
  sent:         'info',
  accepted:     'success',
  rejected:     'danger',
  paid:         'success',
  unpaid:       'warning',
  overdue:      'danger',
  cancelled:    'neutral',
  completed:    'success',
  processing:   'info',
  shipped:      'primary',
  delivered:    'success',
  returned:     'warning',
}

export default function StatusBadge({
  variant = 'neutral',
  dot = true,
  label,
  children,
  size = 'md',
  className = '',
}) {
  const text = label ?? children

  return (
    <span
      className={[
        'badge',
        `badge-${variant}`,
        size === 'sm' ? 'badge-sm' : '',
        className,
      ]
        .filter(Boolean)
        .join(' ')}
    >
      {dot && <span className="badge-dot" aria-hidden="true" />}
      {text}
    </span>
  )
}
