import type { PartyRole } from "../../game/rpgRoguelike";
import { partyRolePresentation } from "../../game/rpgRoguelike";

export function PartyRoleBadge({ role }: { readonly role: PartyRole }) {
  const presentation = partyRolePresentation(role);
  return (
    <span
      className={`rpg-role-badge is-${presentation.className}`}
      aria-label={`Role: ${presentation.label}`}
    >
      <i aria-hidden="true">{presentation.icon}</i>
      <b>{presentation.label}</b>
    </span>
  );
}
