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

const STYLES: Record<StoreRole, string> = {
  owner: 'bg-forest text-white',
  manager: 'bg-forest/15 text-forest',
  shift_lead: 'bg-bone text-ink',
  sales: 'bg-bone text-ink/70',
};

export function MemberRoleBadge({ role }: { role: StoreRole }) {
  return (
    <span
      data-testid="member-role-badge"
      data-role={role}
      className={`inline-block rounded-full px-2 py-0.5 text-xs font-medium ${STYLES[role]}`}
    >
      {STORE_ROLE_LABEL[role]}
    </span>
  );
}