import type { PayoutState } from '@alqove/api-client';

interface Props {
  state: PayoutState;
}

const STYLES: Record<PayoutState, { label: string; className: string }> = {
  scheduled: {
    label: 'Scheduled',
    className: 'bg-slate-100 text-slate-700 ring-1 ring-slate-200',
  },
  in_flight: {
    label: 'In flight',
    className: 'bg-sky-100 text-sky-800 ring-1 ring-sky-200',
  },
  succeeded: {
    label: 'Cleared',
    className: 'bg-forest-100 text-forest-800 ring-1 ring-forest-200',
  },
  failed: {
    label: 'Failed',
    className: 'bg-rose-100 text-rose-800 ring-1 ring-rose-200',
  },
  void: {
    label: 'Voided',
    className: 'bg-stone-100 text-stone-700 ring-1 ring-stone-200',
  },
};

export function PayoutStateBadge({ state }: Props) {
  const cfg = STYLES[state];
  return (
    <span
      className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${cfg.className}`}
      data-testid="payout-state-badge"
      data-state={state}
    >
      {cfg.label}
    </span>
  );
}