"use client";

import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

import type { PrincipalType } from "./types";

type Props = {
  principal: string;
  principalType?: PrincipalType;
  className?: string;
};

export function PrincipalBadge({ principal, principalType, className }: Props) {
  const type = principalType ?? (principal.startsWith("customer:") ? "customer" : "backend");

  return (
    <Badge
      variant="outline"
      className={cn(
        "font-mono text-xs",
        type === "backend"
          ? "border-sky-300 bg-sky-50 text-sky-800 dark:border-sky-700 dark:bg-sky-950 dark:text-sky-200"
          : "border-emerald-300 bg-emerald-50 text-emerald-800 dark:border-emerald-700 dark:bg-emerald-950 dark:text-emerald-200",
        className,
      )}
    >
      {principal}
    </Badge>
  );
}