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

interface Props {
  state: ReturnState;
}

const STYLES: Record<ReturnState, { label: string; className: string }> = {
  requested: {
    label: 'Awaiting seller',
    className: 'bg-amber-100 text-amber-800 ring-1 ring-amber-200',
  },
  approved: {
    label: 'Approved',
    className: 'bg-forest-100 text-forest-800 ring-1 ring-forest-200',
  },
  rejected: {
    label: 'Declined',
    className: 'bg-red-100 text-red-800 ring-1 ring-red-200',
  },
  awaiting_shipment: {
    label: 'Awaiting shipment',
    className: 'bg-sky-100 text-sky-800 ring-1 ring-sky-200',
  },
  in_transit: {
    label: 'In transit',
    className: 'bg-sky-100 text-sky-800 ring-1 ring-sky-200',
  },
  received: {
    label: 'Received',
    className: 'bg-indigo-100 text-indigo-800 ring-1 ring-indigo-200',
  },
  refunded: {
    label: 'Refunded',
    className: 'bg-forest-100 text-forest-800 ring-1 ring-forest-200',
  },
  closed: {
    label: 'Closed',
    className: 'bg-slate-100 text-slate-700 ring-1 ring-slate-200',
  },
  cancelled: {
    label: 'Cancelled',
    className: 'bg-slate-100 text-slate-700 ring-1 ring-slate-200',
  },
  escalated: {
    label: 'Escalated',
    className: 'bg-purple-100 text-purple-800 ring-1 ring-purple-200',
  },
};

export function ReturnStateBadge({ 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="return-state-badge"
      data-state={state}
    >
      {cfg.label}
    </span>
  );
}