"use client";

import { useTranslations } from "next-intl";

import { cn } from "@/lib/utils";

type Role = "owner" | "admin" | "member";

const STYLES: Record<Role, string> = {
  owner:
    "bg-amber-500/10 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300 border-amber-500/20",
  admin: "bg-blue-500/10 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300 border-blue-500/20",
  member: "bg-zinc-500/10 text-zinc-700 dark:bg-zinc-500/20 dark:text-zinc-300 border-zinc-500/20",
};

export function RoleBadge({ role, className }: { role: Role; className?: string }) {
  const t = useTranslations("Org.switcher");
  const label =
    role === "owner" ? t("roleOwner") : role === "admin" ? t("roleAdmin") : t("roleMember");
  return (
    <span
      className={cn(
        "inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium tracking-wider uppercase",
        STYLES[role],
        className,
      )}
    >
      {label}
    </span>
  );
}