'use client';

const ROLE_STYLES: Record<string, string> = {
  super_admin: 'bg-purple-100 text-purple-800',
  client_admin: 'bg-blue-100 text-blue-800',
  user: 'bg-gray-100 text-gray-800',
};

const ROLE_LABELS: Record<string, string> = {
  super_admin: 'Super Admin',
  client_admin: 'Client Admin',
  user: 'User',
};

export default function RoleBadge({ role }: { role: string }) {
  return (
    <span
      className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${ROLE_STYLES[role] || ROLE_STYLES.user}`}
    >
      {ROLE_LABELS[role] || role}
    </span>
  );
}
