type Role = "USER" | "ADMIN" | "SUPER_ADMIN";

type RoleBadgeProps = {
  role: Role;
  isSelf?: boolean;
};

const roleStyles: Record<Role, string> = {
  USER: "border-border/60 bg-muted/20 text-muted-foreground",
  ADMIN: "border-sky-500/40 bg-sky-500/10 text-sky-200",
  SUPER_ADMIN: "border-amber-400/50 bg-amber-400/10 text-amber-200",
};

export default function RoleBadge({ role, isSelf }: RoleBadgeProps) {
  return (
    <span
      className={`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] uppercase tracking-[0.15em] ${roleStyles[role]}`}
    >
      {role === "SUPER_ADMIN" && <span aria-hidden>👑</span>}
      {role}
      {isSelf && <span aria-hidden>🔒</span>}
    </span>
  );
}
