import type { Role } from "@/types/dungeon";
import { Badge } from "@/components/ui/badge";

const roleStyles: Record<Role, string> = {
  tank: "bg-tank/15 text-tank border-transparent",
  healer: "bg-healer/15 text-healer border-transparent",
  dps: "bg-dps/15 text-dps border-transparent",
  everyone: "bg-everyone/15 text-everyone border-transparent",
};

interface RoleBadgeProps {
  role: Role;
}

export function RoleBadge({ role }: RoleBadgeProps) {
  return (
    <Badge
      className={`${roleStyles[role]} px-2.5 py-0.5 text-sm font-bold uppercase tracking-wide`}
    >
      {role}
    </Badge>
  );
}
