interface Props {
  status: string
}

// Status → Tailwind class via the shared @layer components classes
// declared in index.css. Falls back to 'badge-pending' for unknown
// statuses so a new server-side enum value renders as a neutral pill
// instead of throwing.
export function StatusBadge({ status }: Props) {
  const cls =
    {
      DRAFT: 'badge-draft',
      CONFIRMED: 'badge-confirmed',
      SHIPPED: 'badge-shipped',
      RECEIVED: 'badge-received',
      COMPLETED: 'badge-completed',
      CANCELLED: 'badge-cancelled',
      IN_PROGRESS: 'badge-in-progress',
      PENDING: 'badge-pending',
      POSTED: 'badge-confirmed',
      SETTLED: 'badge-shipped',
      REVERSED: 'badge-cancelled',
    }[status] ?? 'badge-pending'
  return <span className={cls}>{status}</span>
}